Question

根据我在MDN中读到的参考资料，它说

如果为TRUE（默认值），则在服务器的响应尚未到达时，JavaScript函数的执行将继续。

这是AJAX中的A.

我一直在使用AJAX，但当我读到它时，我有点困惑。我认为问题可能是我不清楚地理解AJAX概念。我知道当然AJAX不会刷新页面，这意味着与服务器的连接和响应完全在后台完成。

但根据该引用我想象的是，如果我的JavaScript中有这样的代码：

//true, therefore process the function while server retrieves url
var xmlResponse;
var url = "http://example.com/file.xml";
xml_req.open("GET", url, true); 

xml_req.onreadystatechange = function() {
     if(xml_req.readyState == 4 && xml_req.status == 200) {
        if(xml_req.responseText != null)
             xmlResponse = xml_req.responseXML; //server response may not yet arrive
        else {
             alert("failed");
             return false;
        }
     };
xml_req.send(null);

这是否意味着在服务器仍在检索数据的意义上，xmlResponse可能是未定义的？有人可以解释一下AJAX技术中的执行流程究竟是什么？提前谢谢。

Answer 1

我写了一篇更详细的文章here，但这是基本的想法。

将其设置为true表示您正在进行异步请求。这意味着在http请求完成之前代码不会暂停。同步调用会锁定浏览器，因此不会运行任何其他操作。这可能会导致问题，所以人们更喜欢异步。

XHR对象更新了我们正在做的事情。它为我们提供了onreadystatechange事件的更新。我们用它注册一个函数，以便我们可以跟踪它的状态。 onreadystatechange被调用4次。每个都有不同的状态

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

当状态为4时，我们可以获得数据。

现在在您发布的代码中，它正在检查完整状态，并确保状态为200 [ok]

if(xml_req.readyState == 4 && xml_req.status == 200){

如果在返回之前尝试在代码中的其他位置使用xmlResponse，则xmlResponse的值将是未定义的。一个例子

ml_req.send(null);
alert(xmlResponse );

关于XMLHttpRequest文章的第一篇文章可能对您有好处。 Apple Article on xmlhttpreq

Answer 2

要理解的重要一点是，您的onreadystatechange处理程序不会立即执行。它被执行不止一次。如果你把各个部分分解成各个函数，那么概念化可能更容易：

function makeRequest(url)
{
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = receiveResponse;
    xhr.send();
}
function receiveResponse(e)
{
    if (this.readyState == 4)
    {
        // xhr.readyState == 4, so we've received the complete server response
        if (this.status == 200)
        {
            // xhr.status == 200, so the response is good
            var response = this.responseXML;
            ...
        }
    }
}

首先，调用makeRequest然后退出。然后，只要我们从服务器听到任何消息，就会调用receiveResponse。每次，我们都会检查响应是否已完全接收，然后我们才会继续处理该响应。

xmlHttpRequest .open（）方法中的参数“true”

2 个答案: