AJAX：设置innerHTML后获取请求？答案

【问题标题】：AJAX: GET Request After Setting innerHTML?AJAX：设置innerHTML后获取请求？
【发布时间】：2017-07-27 06:30:32
【问题描述】：

使用 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 = 从服务器上的文件中获取文本；
变量 x = y;

【问题讨论】：

这是因为您为onreadystatechange 分配了一个函数，该函数将在以后响应到达时执行，但是解释器继续执行剩余的代码。阅读异步 JS
完美。我会看看。感谢您的帮助！
@Maximus 解释器按原样“执行”代码，恰好代码是函数声明。
@pvg，是的，我知道 :)。而且其实是函数表达式
@Maximus 无法摆脱 js 人和他们疯狂的月球术语！无论如何，（不巧妙的陈述）的一点是，即使对于他们可能已经知道的简单情况，发布者的前提也是错误的：编写一个函数实际上并没有调用它，所以即使没有异步，事情也不会按词法顺序运行。跨度>

标签： javascript ajax logic innerhtml

【解决方案1】：

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

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

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

【讨论】：