Question

我的页面上有一个脚本，它接收来自Flickr的图像的原始JSON数据。我想使用readyState来提供正在进行的实时反馈。

我当前的代码能够做的是检查readyState是否为4，状态是200.如果是，则将原始JSON数据添加到页面。

代码：

function sendRequest (request) {

   //Request is the URL string to flickr containings tags entered by the user.

    x = new XMLHttpRequest();
    x.open("GET", request,false);
    x.send(null);



                if (x.readyState==4 && x.status==200)
                {
                document.getElementById("resultsContainer").innerHTML="Raw JSON Data: <br>"+x.responseText+"<br><br>";
                } 


}

正如您所看到的，它将收到的值添加回resultsContainer div。我试图在同一个div中添加反馈，如下所示：

if(x.readyState==3){
document.getElementById("resultsContainer").innerHTML="Processing Request";
}

但它没有效果。我想知道为什么它成功识别就绪状态4，但不是三个？

我知道有一个onreadystatechange函数并尝试使用它，但它从未执行过任何代码，即无效。

如何在请求发生时执行操作（readyState == 3）？

编辑：

CURRENT CODE:

function sendRequest (request) {

    x = new XMLHttpRequest();
    x.open("GET", request,true);
    x.send();

    x.onreadystatechange = function () {

        if (x.readyState==4 && x.status==200){
            document.getElementById("resultsContainer").innerHTML="success <br>"+x.responseText;
        } 

        if(x.readyState==3){
            document.getElementById("getIms").value="Processing";
        }

    }



}

只有在返回并添加值时，元素getIms的值才会更改为处理到结果容器。

Answer 1

您应该将代码更改为

x.open("GET", request, true);
x.onreadystatechange = function()
{
    //Your code here to handle readyState==4 and readyState==3
    if (x.readyState==4 && x.status==200)
    {
        document.getElementById("resultsContainer").innerHTML="Raw JSON Data: <br>"+x.responseText+"<br><br>";
    }
    else if (x.readyState==2)
    {
        document.getElementById("resultsContainer").innerHTML="Processing Request";
    }
}
x.send();

这是因为x.open中的'false'关键字表明它应该同步工作，即：它发送请求，然后等待浏览器获得响应（readyState == 4）然后运行其余的代码。

更改说x.open必须是异步的，你还必须创建一个事件处理程序，它是每次readyState更改时都会执行的函数。

您应该在else语句中处理请求时应执行的代码。它在readyState = 3上没有做任何事情的原因是因为readyState = 3意味着已经接收到一部分数据，但是如果数据量非常小，则该状态对于非常有限的数量是正确的时间。在您的请求被发送时，ReadyState = 2为真。

Ajax onreadystatechange函数readyState

1 个答案: