ajax状态接收服务器返回数据

ajax有个readyState的属性用于表示当前的状态

0：ajax还没有调用open()。
1：还没有发送（还没有调用send()）。
2：请求已发送，使用了send()（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：已经获取服务器的响应。

<!DOCTYPE html>
<html>
    <head>
        <title>Todo supply a title</title>
        <Meta charset="UTF-8">
        <Meta name="viewport" content="width=device-width,initial-scale=1.0">
        <script>
            function response() {
                //创建ajax对象
                var xhr = new XMLHttpRequest();
                //进行状态监听
                xhr.onreadystatechange = function () {
                    console.log(xhr.readyState);
                    if (xhr.readyState == 4)
                    {
                         document.getElementById("divtext").innerHTML= xhr.responseText;
                    }
                }
                //创建链接信息
                xhr.open("get","./echo.PHP");
                xhr.send();
            }
        </script>
    </head>
    <body>
        <button onclick="response()">获取服务器内容</button>
        <div id="divtext"></div>
    </body>
</html>

这是js在控制台输出readyState的变化

如果删除send()这行代码则状态只会出现1(未使用send()发送)

其余的以此类推。

最后服务器返回的信息是通过responseText这个属性获取的。

服务器代码为：

<?PHP
header("Content-type:text/html;charset='utf8'");
echo "<div style='color:blue;text-align:center;'>你好时间</div>";

onreadystatechange

这个属性关联一个JavaScript回调函数，每当readyState属性值改变时，就会调用一次。

readyState

HTTP请求的状态，只能有5个可选的值， 0 = uninitialized,1 = loading,2 = loaded,3 = interactive,and 4 = complete.最重要的是readyState==4，这时请求响应才真正完成，可以进行数据的操作。例如判断HTTP响应码是否是200。readyState值每变化一次，回调函数就被调用一次，但不可依据调用次数和顺序来编码，因为不同浏览器实现不一样，有时候IE上会执行6次，有时候某个状态码会执行多次。所以一般只要在代码里面加上 if(readyState==4){}在代码块中实现自己的逻辑。注意：XMLHttpRequest对象刚new出来的时候，readyState的值是0。

responseText

该属性代表的是从Server端返回的一个string格式的响应。

responseXML

代表从Server端传回的XML格式的数据，可以直接被当作DOM对象使用。

status

这个在HTTP响应中的响应码。200代表响应成功，所以一般在status==200才进行响应数据的操作，如果不是200，那说明HTTP响应不正常，也就不用处理。

statusText

HTTP协议中跟在响应码后面的相应说明串。例如200 后面就会跟着OK。

ajax状态接收服务器返回数据

相关文章