javascript - 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 被绑定(bind)为就绪状态更改的处理程序(无论状态如何)
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. 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/