第一步 让我们来快速认识一下Ajax
:
1、Ajax 是一种创建交互式Web应用程序而无需牺牲浏览器兼容性的流行方法,其实就是前后台数据交互的过程,但在前端向后台请求数据和后台向前端响应数据的过程中,我们需要遵顼传输协议(这个传输协议大白话的解释就是,我和你进行交流对话,咱们俩先要商量好说什么语言,是汉语、英语或者日语,此处交流的语言,就是传输协议);
**2、**Ajax所能实现的功能:Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,比如当我去购物网站买东西的时候,在没有加载页面的情况下,分别展示了不同的内容,此处使用的就是ajax技术。
第二步 在JavaScript中创建一个Ajax对象
1. 在JavaScript中,创建Ajax对象 (先找到一个你想追的女生)
源码:var ajax_=new XMLHttpRequest()||new ActiveXObject(‘Microsoft.XMLHTTP’);
2. 连接到服务器 (跟她搭讪)
源码: ajax_.open(‘get’,‘url’,true);
open(方式,后台地址(文件名),同步异步);
参数一:post/get (网络请求的方式);
参数二:请求的文件名(后台地址);
参数三:同步(false) 异步(true);
3. 发送请求 (对她表白说:“I love you”)
源码:ajax_.send(); (以get为例)
4. 接收返回值(女生对你说:“你不配”)
接收服务器返回结果,得到返回值。此时会触发onreadystatechange 事件
如果后台响应的是xml文件,用 ajax_.responseXML进行解析响应数据;
其余的用: ajax_.responseText;进行解析响应数据;
jax_.onreadystatechange=function(){
if(ajax_.readyState==4){
if(ajax_.status= =200){
console.log(ajax_.responseText);
}else{
console.log(‘请求失败’);
}
}
}