太多的AJAX响应

Question

我正在制作一个简单的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
    }
}

Answer 1

这是因为您的流程如下所示：

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/