主机教程

主机教程,建站教程,编程学习教程
  • 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 会发生异常,所以为它设置一个空函数。

更多...

加载中...