1

我正在发出一个简单的 AJAX 请求并使用以下代码在 JS 控制台中记录响应。它工作得非常好，但困扰我的一件事是它从服务器返回了 3 个响应（见附图）。

任何人都可以解释为什么会这样吗？

var xmlHttp = newXMLHttpObj();

function newXMLHttpObj(){
    var xml;
    if(window.XMLHttpRequest){
        xml = new XMLHttpRequest();     
    } else{
        xml = new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xml;
}

function ajaxHandler(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
        //handle response
        var response = xmlHttp.responseXML.documentElement;
        console.log(response);
        var name = response.getElementsByTagName("name")[0].firstChild.data;
        var age = response.getElementsByTagName("age")[0].firstChild.data;
        ajaxContent.innerHTML = "Name: " + name + "<br />Age: " + age;
    } else{
        setTimeout(ajaxHandler, 1000);
    }
}

function ajaxProcess(){
    var ajaxContent = document.getElementById("ajaxContent");
    ajaxContent.innerHTML = "loading";
    //check server is ready to comunicate
    if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4){
        xmlHttp.open("POST", "/js/test.php", true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.onreadystatechange = ajaxHandler;
        xmlHttp.send("name=the chuff&age=26");
    } else{
        setTimeout(ajaxProcess, 1000); //restart ajaxProcess until ready to comunicate
    }
}

控制台截图

4

1 回答 1

3

发生这种情况是因为您的流程如下所示：

  1. 请求对象未初始化并且xmlHttp.readyState == 0
  2. ajaxHandler被绑定为处理程序以准备状态更改（无论状态如何）
  3. 请求被初始化并发送
  4. 服务器连接建立并xmlHttp.readyState == 1
  5. 就绪状态改变并被ajaxHandler调用
  6. 由于xmlHttp.readyState != 4新ajaxHandler呼叫安排在 1 秒后
  7. 收到的请求和xmlHttp.readyState == 2
  8. 就绪状态改变并被ajaxHandler调用
  9. 由于xmlHttp.readyState != 4新ajaxHandler呼叫安排在 1 秒后
  10. 请求被处理并且xmlHttp.readyState == 3
  11. 就绪状态改变并被ajaxHandler调用
  12. 由于xmlHttp.readyState != 4新ajaxHandler呼叫安排在 1 秒后
  13. 请求完成，响应准备就绪，xmlHttp.readyState == 4
  14. 第一次将响应写入控制台
  15. 1s 过去了，预定ajaxHandler的调用又被调用了 3 次！并且响应被写入控制台 3 次以上。

因此，通常您应该看到响应记录到控制台4次，但并非所有浏览器都通过所有就绪状态（例如，可能没有单独的就绪状态 3 并且浏览器从 2 直接切换到 4），这就是您记录响应 3 次的原因.

如果您想修复它，请不要重新安排ajaxHandler：

function ajaxHandler(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
        //handle response
        flag = true;
        var response = xmlHttp.responseXML.documentElement;
        console.log(response);
        var name = response.getElementsByTagName("name")[0].firstChild.data;
        var age = response.getElementsByTagName("age")[0].firstChild.data;
        ajaxContent.innerHTML = "Name: " + name + "<br />Age: " + age;
    }
}

最后，使用像 jQuery 这样的库会更容易和方便地照顾所有这些员工。http://api.jquery.com/jQuery.ajax/

于 2013-03-19T12:25:32.547 回答