创建ajax的过程

step1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象; 
step2. 创建一个新的HTTP请求,并指定改HTTP请求的方法、URL以及验证信息; 
step3. 设置响应HTTP状态变化的函数; 
step4. 发送HTTP请求; 
step5. 获取异步调用返回的数据; 
step6. 使用javascript和DOM实现局部刷新;

代码实现:

 1 <script type="text/javascript">
 2     window.onload = function(){
 3         //第一步:创建xhr对象
 4         //xhr是一个对象;里面可以放很多东西,数据;
 5         var xhr = null;
 6         if(window.XMLHttpRequest){//标准浏览器
 7             xhr = new XMLHttpRequest();//创建一个对象
 8         }else{//早期的IE浏览器
 9             xhr = new ActiveXObject('Microsoft.XMLHTTP');//参数是规定的;
10         }
11         console.log("状态q"+xhr.readyState);//0
12         //第二步:准备发送请求-配置发送请求的一些行为
13         //open即打开链接,第一个参数是以什么方式;第二个是往哪儿发送请求,第三个可以不写,默认true,表示异步,false表示同步;;
14         xhr.open('get','03form.php',true);
15         console.log("状态w"+xhr.readyState);//1
16 
17         //第三步:执行发送的动作
18         //send也可以写在前面,推荐写在后面;写null是兼容问题;
19         xhr.send(null);
20         console.log("状态e"+xhr.readyState);//1
21 
22         //第四步:指定一些回调函数,也属于事件函数;不触发不执行,触发条件是xhr.readyState;z这个值有0-4,共5个状态,是由浏览器控制的;
23         xhr.onreadystatechange = function(){
24             if(xhr.readyState == 4){//4指服务器返回的数据可以使用;
25                 if(xhr.status == 200){ //判断已经成功的获取了数据;200表示hTTP请求成功;404表示找不到页面;503表示服务器端有语法错误;
26                     var data = xhr.responseText;//json,文本,主角;
27                     // var data1 = xhr.responseXML;
28                 }
29             }
30             // console.log("状态t"+xhr.readyState);//2表示已经发送完成;
31 
32             // console.log(1234);
33         }
34 
35         // console.log(456);
36         console.log("状态r"+xhr.readyState);//1
37 
38 
39     }
40     </script>

 

posted @ 2018-02-23 13:34  前端极客  阅读(6626)  评论(0编辑  收藏  举报