Question

使用W3School示例（https://www.w3schools.com/js/js_ajax_intro.asp）：

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
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();
}
</script>

</body>
</html>

有人可以解释为什么在设置innerHTML后会发生GET操作吗？

从逻辑上讲，我已经习惯了从上到下进行语言的语言，逐步处理每行代码。

当我第一次阅读此内容时，我认为 demo 元素的innerHTML将为空白，并且没有任何操作可以将innerHTML重新设置为的结果服务器请求后面的ajax_info.txt 。在后端语言中考虑到这一点，如果innerHTML是变量，则必须更新，最后一个语句可能如下所示：

document.getElementById("demo").innerHTML =
          this.responseText;

使用变量的伪代码示例：

var x =''或NULL;
var y =从服务器上的文件中获取文本;
var x = y;

Answer 1

onreadystatechange是一个监听器，它不会立即执行，而是监听该事件的XHR请求。

当事件被触发时，例如当响应从服务器返回时，代码将被执行。

Answer 2

您还可以交换xhttp.onreadystatechange和xhttp.open()的订单。

请求只会在激活xhttp.send()之后发送到服务器。

在xhttp.onreadystatechange=function(){}中你可以找到

if (this.readyState == 4 && this.status == 200){ // dom excution }

表示xhttp.send()向服务器和readyState==4 &&status==200发送请求后的dom执行。

Answer 3

在javascript中，无法保证每个代码都会一个接一个地执行。如果某行需要时间，则第二行开始执行。所以这里如果需要一些执行优先级则需要应用回调。对于Ajax的情况，请遵循同步或异步方式。

AJAX：设置innerHTML后获取请求？

3 个答案: