ajax这些你可能没用过

web前端领域的迅猛发展，很多人加入了这个战斗序列。但是不少的人在使用时，更多的是拷贝和黏贴。不求甚解。仔细看下这个ajax调用里，有那些是你不知道的，或从来没有用过的。

        var userPhone = $("#username").val();
        $.ajax({
             url:getCheckCodeUrl,
             type : 'get',
             data:{
                 "userPhone":userPhone
             },
             timeout:150,
             processData:true,
             //data : "userPhone="+userPhone,
             //dataType:"json",
             context: document.body,
             beforeSend:function(XMLHttpRequest){
                 console.log(XMLHttpRequest);
             },
             dataFilter:function(data, type){
                 return data;
             },
             success: function (data, status){
                
             },
             error:function(error){
                 
                 console.log(error);
             },
             complete:function(XMLHttpRequest, textStatus){
                 console.log(XMLHttpRequest,textStatus);
                 
             }      
           });
        

如果有不清楚，可以参考下表，并在实践中去用，只有用了理解才会深刻。

image.png

上面的是jquery的ajax调用,如果不用jquery等ui库，让你自己写一个ajax调用方法，你知道怎么写吗？

ajax技术的核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据

  var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
              img.style.display = 'none';
              btn.removeAttribute('disabled');
              var data = JSON.parse(xhr.responseText);
              var sum = add() - 1;
              if(sum < data.length){
                result.innerHTML += data[sum];    
              }
            }
        }
    }
    //发送请求
    xhr.open('get','data.php',true);
    xhr.send();

XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：
0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了.

理论上，只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们对readyState值为4的阶段感兴趣，因为这时所有数据都已就绪

[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况.