为什么xmlhttprequest函数open（）和send（）位于函数的末尾

Question

我一直在自学php和xml（以及其他语言），在遍历w3schools的xmlhttprequest教程时，我注意到open（）和send（）函数位于函数的末尾，而不是位于函数的末尾。 这有点令人困惑，因为如果尚未发送请求，如何从服务器获得响应？ 我可能错过了一些简单的事情，如果是这样，我道歉，但是有人可以帮助我解决我的困境吗？ 提前致谢

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Answer 1

读取数据的代码将在一个单独的函数中，该函数被分配为事件处理程序。

该函数将在收到响应之前运行。

相关： 如何从异步调用返回响应？

Answer 2

在现代浏览器上，这可能并不重要，但从根本上讲，您可以在发送呼叫之前进行设置。 特别是， 在要求XHR做某事之前，已附加所有处理程序。 相比：

// Example 1
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
    // Got the data
});
xhr.open("GET", "http://example.com");
xhr.send();

同

// Example 2
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com");
xhr.send();
xhr.addEventListener("load", function() {
    // Got the data
});

浏览器不是单线程的，尽管它们在单个主线程（以及您创建的所有Web Worker）中运行JavaScript代码。 因此， 有可能 （尽管极不可能 ），使用示例2，如果资源位于浏览器的缓存中，则单独的线程处理网络调用可以触发JavaScript线程上send和addEventListener调用之间的load事件，请参见没有处理程序已注册，并且没有将任务排队等待事件循环调用处理程序。 而在示例1中，如果它在send立即触发了load事件，它将看到一个附加的处理程序并排队一个任务来调用它（稍后在事件循环来处理该任务时运行）。

这是一个假设场景的示例，显示了线程交互：

Example 1 - Highly Theoretical Scenario

JavaScript Thread                          Network Thread
-----------------------------------------  --------------
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
    // Got the data
});
xhr.open("GET", "http://example.com");
xhr.send();
    (Within send: Start the send, handing
    off to the network thread)
                                           1. Start a GET on `xhr`
                                           2. It's in cache, are there any load
                                              handlers registered on `xhr`?
                                           3. Yes, queue a task to call the handler
(Done with current task)
(Pick up next task)
Call the handler

VS

Example 2 - Highly Theoretical Scenario

JavaScript Thread                          Network Thread
-----------------------------------------  --------------
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com");
xhr.send();
    (Within send: Start the send, handing
    off to the network thread)
                                           1. Start a GET on `xhr`
                                           2. It's in cache, are there any load
                                              handlers registered on `xhr`?
                                           3. No, don't queue a task to call 
                                              the handler
xhr.addEventListener("load", function() {
    // Got the data
});
(Done with current task)
(Pick up next task)
(No task, do nothing)

我非常怀疑任何当前的浏览器实际上都可以做到这一点（示例2），而且我不知道XHR过去曾遇到过这样的问题。 但它是理论上的可能，并有一个非常类似的问题，大约在2008年，设置src的上img挂钩之前元素load事件吧。 但是，浏览器已解决了该问题，我很惊讶地发现它们现在对上面的示例2场景都是开放的，即使它们在过去某个时候也可能不在。

实际上，我怀疑这是否重要。 但是，如果我使用XMLHttpRequest ，我仍将使用示例1（我不使用fetch ）。