javascript - AJAX响应过多

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

最佳答案

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


请求对象未初始化且xmlHttp.readyState == 0
ajaxHandler作为处理程序绑定到就绪状态更改（不会改变状态）
请求已初始化并发送
服务器连接已建立且xmlHttp.readyState == 1
就绪状态已更改，并且调用了ajaxHandler
由于xmlHttp.readyState != 4新的ajaxHandler通话安排在1秒后
收到请求并xmlHttp.readyState == 2
就绪状态已更改，并且调用了ajaxHandler
由于xmlHttp.readyState != 4新的ajaxHandler通话安排在1秒后
请求已处理且xmlHttp.readyState == 3
就绪状态已更改，并且调用了ajaxHandler
由于xmlHttp.readyState != 4新的ajaxHandler通话安排在1秒后
请求已完成且响应已准备就绪，xmlHttp.readyState == 4
响应首次写入控制台
传递了1，并且计划的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/

关于javascript - AJAX响应过多，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15498257/