XMLHttpRequest.readyState属性：跟踪异步请求的状态

在 JavaScript 中，每当 ajax 请求被发送到服务器时，我们需要根据请求响应状态来执行一定的操作，readyState 属性存储 XMLHttpRequest 对象的状态信息。每当 readyState 属性改变时，就会触发 readystatechange 事件，然后将相应的处理代码放在 onreadystatechange 事件处理函数中。

异步响应状态

使用 readyState 属性可以实时跟踪异步响应状态。当该属性值发生变化时，会触发 readystatechange 事件，调用绑定的回调函数。readyState 属性值说明如表所示。 

如果 readyState 属性值为 4，则说明响应完毕，那么就可以安全的读取响应的数据。

考虑到各种特殊情况，更安全的方法是同时监测 HTTP 状态码，只有当 HTTP 状态码为 200 时，才说明 HTTP 响应顺利完成。

示例

下面示例中，修改请求为异步响应请求，然后通过 status 属性获取当前的 HTTP 状态码。如果 readyState 属性值为 4，且 status（状态码）属性值为 200，则说明 HTTP 请求和响应过程顺利完成，这时可以安全、异步的读取数据。

window.onload = function () {  //页面初始化
    var b = document.getElementsByTagName("input")[0];
    b.onclick = function () {
        var url = "server.php";  //设置请求的地址
        var xhr = createXHR();  //实例化XMLHttpRequest对象
        xhr.open("POST", url, true);  //建立间接，要求异步响应
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  //设置为表单方式提交
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    console.log(xhr.responseText);  //接收数据
                }
            }
        }
        xhr.send("callback=functionName");  //发送请求
    }
}

中止请求

使用 abort() 方法可以中止正在进行的请求。用法如下：

在调用 abort() 方法前，应先清除 onreadystatechange 事件处理函数，因为 IE 和 Mozilla 在请求中止后也会激活这个事件处理函数。如果给 onreadystatechange 属性设置为 null，则 IE 会发生异常，所以为它设置一个空函数。