AJAX

---

XMLHttpRequest

• XMLHttpRequest（XHR）对象用于与服务器交互
• 通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。
• 这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。 网址

一、创建

var xhr = new XMLHttpRequest();

一、发送请求

open()

xhr.open("get","example.php", false);

三、接收响应

responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)

三、接收响应

如果接受的是同步响应，则需要将open()方法的第三个参数设置为false，那么send()方法将阻塞直到请求完成。一旦send()返回，仅需要检查XHR对象的status和responseText属性即可。 同步请求是吸引人的，但应该避免使用它们。客户端javascript是单线程的，当send()方法阻塞时，它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢，那么用户的浏览器将冻结。

五、异步

如果需要接收的是异步响应，这就需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

理论上，只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。\

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){
            //实际操作
            result.innerHTML += xhr.responseText;
        }
    }
}
//发送请求
xhr.open('get','message.xml',true);
xhr.send();

原生ajax封装xhr

//封装原生xhr对象
var ck = {
  ajax: function ( url, config ){
    var method = config.method || 'GET';
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if( xhr.readyState == 4  ){

        if( xhr.status == 200){
          //成功
          config.success && config.success( JSON.parse( xhr.responseText )  );
        }else{
          //失败
          config.error && config.error( xhr );
        }

        //完成
        config.complete && config.complete( xhr );

      }
  }
    //GET提交参数合并
    if( method == 'GET' ){
      urlStr = '?';
      for( var key in config.data ){
        urlStr += key+'='+config.data[key]+'&'
      }
      url += urlStr.slice(0,-1)
    }
    xhr.open( method, url );
    //POST提交参数合并
    var form = null;
    if( method == 'POST' ){
      form = new FormData();
      for( var key in config.data ){
        form.append( key, config.data[key] );
      }
    }
    xhr.send( form );
  },
  get: function(){
    var args = arguments;
    var config = { method: 'GET' };
    if( 'object' === typeof args[1] ){
      config.data = args[1];
    }
    if( 'function' === typeof args[1] ){
      config.success = args[1];
    }else if( 'function' === typeof args[2] ){
      config.success = args[2];
    }
    this.ajax( args[0], config );
  },
  post: function(){
    var args = arguments;
    var config = { method: 'POST' };
    if( 'object' === typeof args[1] ){
      config.data = args[1];
    }
    if( 'function' === typeof args[1] ){
      config.success = args[1];
    }else if( 'function' === typeof args[2] ){
      config.success = args[2];
    }
    this.ajax( args[0], config );
  }

};