1

我的页面上有一个脚本，它接收来自 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，而不是 3？

我知道有一个 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 的值才会更改为处理。

4

1 回答 1

3

您应该将代码更改为

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 在您的请求发送时为真。

于 2014-04-26T19:12:09.070 回答