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

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

异步响应状态

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

readyState属性值
返回值 说明
0 未初始化。表示对象已经建立,但是尚未初始化,尚未调用 open() 方法
1 初始化。表示对象已经建立,尚未调用 send() 方法
2 发送数据。表示 send() 方法已经调用,但是当前的状态及 HTTP 头未知
3 数据传送中。已经接收部分数据,因为响应及 HTTP 头不安全,这时通过 responseBody 和 responseText 获取部分数据会出现错误
4 完成。数据接收完毕,此时可以通过 responseBody 和 responseText 获取完整的响应数据

如果 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() 方法可以中止正在进行的请求。用法如下:

xhr.onreadystatechange = function () {};  //清理事件响应函数
xhr.abort();  //中止请求

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

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/23329.html

(0)
上一篇 2021年7月20日
下一篇 2021年7月20日

相关推荐

发表回复

登录后才能评论