JS学习之ajax相关知识和ajax的封装

XMLHttpRequest对象

1. XMLHttpRequest用于在后台与服务器交换数据，是AJAX之所以能对网页进行局部刷新的核心,同时Ajax技术离开了XMLHttpRequest对象将失去与服务器异步通信的能力。

2：不同的浏览器创建XMLHttpRequest对象使用的语句是不同的。

3：3.XMLHttpRequest对象方法与属性

4：关于使用get还是post

get 简单方便，在大部分情况下都能用

post 在传送的数据比较多时，或者比较重要的数据时请用post

5:在使用get请求时候，有可能得到的是缓存的结果，需要对请求处理下

xhr.open(‘get‘,‘test.php?t=‘+Math.random())

6:异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

1）在等待服务器响应时执行其他脚本

2）当响应就绪后对响应进行处理

 xmlhttp.onreadystatechange=function(){            if (xmlhttp.readyState==4 && xmlhttp.status==200){

<span style="white-space:pre"> </span>document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}

7：AJAX运行流程

整个Ajax技术紧紧围绕在XMLHttpRequest对象周围
（1）创建XMLHttpRequest对象，XMLHttpRequest对象的作用如同名字所暗示的，允许通过客户端脚本来发送HTTP请求。

（2）XMLHttpRequest打开连接并发送数据

服务器端响应处理阶段

（3)XMLHttpRequest获得服务器端响应状态。XMLHttpRequest对象也是一个普通的JavaScript对象，如一个普通按钮或一个普通文本框一样，可以触发事件；而XMLHttpRequest触发的事件就是onreadystatechange，当XMLHttpRequest对象的状态改变时，将触发它。为XMLHttpRequest对象的onreadystatechange事件指定事件处理函数，该函数将在XMLHttpRequest状态改变时被执行，这个事件处理函数也叫回调函数（XMLHttpRequest状态改变，且readyState=4&&status=200时，表明服务器响应已经完成且是正确的响应状态，此时可以开始处理服务器响应）
（4）客户端处理函数执行。进入事件处理函数后，XMLHttpRequest依然不可或缺，事件处理函数借助于XMLHttpRequest的responseText或responseXML属性获取服务器的响应，至此XMLHttpRequest运行周期结束；JavaScript通过DOM操作将响应动态加载到XHMTL页面中。
整个过程，从发送HTTP请求到监控服务器的响应状态，到获取响应数据，XMLHttpRequest一直是Ajax技术的灵魂

8：XMLHttpRequest工作流程图

ajax的封装

/*
         URL       地址
         method    请求的方式get/post
         dataType  返回的数据类型string/xml/json
         data      请求时候传的数据（一个对象）
         succ      成功后的回调函数
         fail      失败后的回调函数
         data的数据格式
         {
           ‘user‘ : ‘xubj‘,
           ‘password‘:123
         }
         user=xubj&password=123
       */
       function  ajax(obj){
              var settings={
                     url:‘‘,
                     method:‘get‘,
                     data:{},
                     dataType:‘json‘,
                     succ:function(){},
                     fail:function(){}
              };

       //用户传的参数覆盖默认参数
       for (var attr in obj){
             settings[attr] = obj[attr]
       }
       //把数据拼接成正确的格式  user=xubj&passowrd=123
       var arr=[];
       for(var attr in settings.data){
            arr.push(attr+‘=‘+settings.data[attr]);
       }
       settings.data=arr.join(‘&‘);
       //声明一个ajax对象
       var ajax=window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);
       //设置请求方式
       if(settings.method.toLocaleCase()===‘get‘){
          ajax.open(‘get‘,settings.url+‘?‘+settings.data+‘&‘+new Date().getTime(),true);
          ajax.send();
       }else{
          ajax.open(‘post‘,settings.url,true);
          ajax.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
          ajax.send(settings.data);
       }
       //设置完成事件的兼容性
       if(typeof ajax.onload===‘undefined‘){
            ajax.onreadystatechange=ready;
       }else{
           ajax.onload=ready;
       }
       function ready(){
             if(ajax.readyState==4){
                 if(ajax.status==200){
                     switch(settings.dataType.toLocaleCase()){
                         case  ‘string‘:
                         settings.succ(ajax.responseText);
                         break;
                         case  ‘json‘:
                         settings.succ(JSON.parse(ajax.responseText));
                         break;
                         case   ‘xml‘:
                         settings.succ(ajax.responseXML);
                     }
                 }else{
                     settings.fail(ajax.status );
                 }
             }
       }
     }/*    使用：    ajax({        url:‘test.php‘,        method:‘get‘,        dataType:‘json‘,        data:{                 uesr:‘xubj‘,                 password:123             },        succ:fucntion(){             成功处理          },        fail:function(){             失败处理          }     });*/

原文地址：https://www.cnblogs.com/xubj/p/9994099.html