重识ajax

1. 起因

为什么我要写这篇文章？原因是这样的，在工作开发中，和后台对接口的时候，遇到了一些请求上的问题。发现之前的同事封装的api请求函数，是在superagent库中的request上封了一层做请求函数的，对我要实现的需求不满足。于是我便重新写个满足要求的请求函数。

2. 基本认识

ajax是asynchronous javascript and XML的简写，通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。通过与后台通信包含下面几个步骤:

• 创建ajax请求
• 发出http请求
• 收到服务器传回的消息
• 更新网页数据

2.1 创建ajax请求

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

IE5是第一款引入XHR对象的浏览器。在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的，而IE7+及其他标准浏览器都支持原生的XHR对象

创建一个XHR对象，也叫实例化一个XHR对象，因为XMLHTTPRequest()是一个构造函数。下面是创建XHR对象的兼容写法

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

注意:如果要建立N个不同的请求，就要使用N个不同的XHR对象。当然可以重用已存在的XHR对象，但这会终止之前通过该对象挂起的任何请求。

2.2 发出http请求

在使用xhr的时候第一个调用的是open方法，如下，该方法接受3个参数，

xhr.open('GET','https://www.geekjc.com/fetch/library',false);

这个open方法有以下4点说明：

1. open()方法的第一个参数用于指定发送请求的方式，这个字符串，不区分大小写，但通常使用大写字母。”GET”和”POST”是得到广泛支持的.
   ‘GET’用于常规请求，它适用于URL完全指定的资源。当请求对服务器没有任何副作用是可缓存的情况下，
   ‘POST’方法常用与HTML表单，他在请求主题中额外包含数据且这些数据常存在服务器上的数据库中。相同的URL的重复POST请求从服务器的得到的相应可能不同
   除了”GET”和”POST”之外，参数还可以是”HEAD”、”OPTIONS”、”PUT”。而由于安全风险的原因，”CONNECT”、”TRACE”、”TRACK”被禁止使用.
2. open()的第二个参数是URL，该URL对于执行代码的当前页面，且只能是同一域中使用相同协议和端口的URL发送请求。
3. open()的第三个参数是表示是否异步发送请求的值，如果不填写。默认为true,表示异步发送，
4. 如果请求一个密码保护的URL用于认证，用户和密码作为第4和第5个参数传递给open()方法

然后是send()方法，send()方法接受一个参数，即作为请求主题发送的数据。调用send()方法后，请求被分配到服务器。

如果是GET方法，send()方法无参数，或参数为null；如果是POST方法，send()方法的参数是要发送的数据。

xhr.open("GET","https://www.geekjc.com/fetch/library",true)
xhr.send(null);

2.3 接收响应

一个完整的http响应是有状态吗，响应头集合，和响应主题组成。在收到响应的消息后，这些都是可以通过xhr对象的属性个方法所使用，主要有一下4个属性

• responseText;作为相应主题返回的文本，（文本形式）
• responseXML;如果响应的内容是‘text/xml’或者是哦application/xml;属性中将会保存，响应数据的xml形式。DOM文档形式。
• status: http的状态码（数字形式）
• statusText;http状态说明，（文本形式）

收到响应后，第一步是检查status,以确定响应已经成功的返回，一般来说。http状态码200作为成功的标志。此时，responseText属性的内容也已经准备就绪，而且在内容正确的情况下,responseText的内容也可以访问了，此外状态码304表示资源并没有被修改，可以直接使用浏览器中的缓存。

无论响应内容是什么类型。都会被保存在responseText中，而对于非XML数据而言，responseText的值则为null;

响应也有同步和异步：

同步

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

例子：

<script>
 function ajax(){
   var xhr;
   if(window.XMLHttpRequst){
     var xhr = window.XMLHttpRequst;
   }else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
   }
   //发送请求
   xhr.open("GET","/fetch/library",false);
   xhr.send();
   //同步接受响应
   if(xhr.readyState==4){
     if(xhr.status == 200){
        result.innerHTML += xhr.responseText;
     }
   }

} 
</script>

异步

如果接受的异步响应，这就需要检测XHR的readyState的属性，该属性表示，请求/响应过程中当前的活动阶段，这个属性可以去一下的值，

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

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

例子:

<script>
function ajax(){
    //创建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){
                //实际操作
                result.innerHTML += xhr.responseText;
            }
        }
    }
    //发送请求
    xhr.open('get','/fetch/post',true);
    xhr.send();
}
</script> 

3. 深入总结

3.1 中断请求

核心：调用XMLHttpRequest对象上的abort方法
原生代码示例:

xhr.open("POST","theUrl",true);
xhr.onreadystatechange=function(){
    ...//得到响应之后的操作
}
xhr.send();
//设置8秒钟后检查xmlHttp对象所发送的数据是否得到响应.
setTimeout("CheckRequest()","8000");

function CheckRequest(){
   //为4时代表请求完成了    
    if(xhr.readyState!=4){
        alert('响应超时');
        //关闭请求
        xhr.close();
    }
}

这是手动的，也可以设置请求超时时间，让它自己超时终止请求

超时

xhr.open("GET","https://www.geekjc.com/fetch/post",true);
xhr.ontimeout=function(){
    console.log("请求超时")
}
xhr.timeout = 1000;
xhr.send();

这是设置1秒后，如果没有数据响应，就停止请求了。

3.2 简单封装的ajax函数

    ajax({
        url: "./TestXHR.aspx",              //请求地址
        type: "POST",                       //请求方式
        data: { name: "super", age: 20 },        //请求参数
        dataType: "json",
        success: function (response, xml) {
            // 此处放成功后执行的代码
        },
        fail: function (status) {
            // 此处放失败后执行的代码
        }
    });

    function ajax(options) {
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.dataType = options.dataType || "json";
        var params = formatParams(options.data);

        //创建 - 非IE6 - 第一步
        if (window.XMLHttpRequest) {
            var xhr = new XMLHttpRequest();
        } else { //IE6及其以下版本浏览器
            var xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        //接收 - 第三步
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                var status = xhr.status;
                if (status >= 200 && status < 300) {
                    options.success && options.success(xhr.responseText, xhr.responseXML);
                } else {
                    options.fail && options.fail(status);
                }
            }
        }

        //连接 和 发送 - 第二步
        if (options.type == "GET") {
            xhr.open("GET", options.url + "?" + params, true);
            xhr.send(null);
        } else if (options.type == "POST") {
            xhr.open("POST", options.url, true);
            //设置表单提交时的内容类型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
    }
    //格式化参数
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
        }
        arr.push(("v=" + Math.random()).replace(".",""));
        return arr.join("&");
    }

4. 参考文章

• XMLHttpRequest 对象
• ajax
• 原生JS写Ajax的请求函数-原生ajax(这篇文章写得很好)

5. 相关文章

• 详解ajax