为什么 .innerHTML 在 xmlhttp.open(） 和 .send(） 之前被更改

why is .innerHTML changed before xmlhttp.open() and .send()?

本文关键字：send xmlhttp open innerHTML 为什么      更新时间：2023-09-26

我正在学习使用 xmlhttprequest/AJAX。在这个来自 w3schools 的示例代码中，我不明白为什么会有这样一行：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

在此之前：

 xmlhttp.open("GET","demo_get.asp",true);
 xmlhttp.send();

我的想法是，您应该在有任何响应文本之前发送 GET 请求来执行任何操作。我的理解错误在哪里？

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>

有问题的行在 xmlhttp.onreadystatechange 内部，这是一个函数。注意它的使用方式：

xmlhttp.onreadystatechange = function ()
{
    ...
}

在这种情况下，它是一个回调函数 - 当 ajax 请求（又名 xmlhttp.send() ）完成时调用它。

在深入研究 ajax 之前，你可能想复习一下你的 JavaScript。

您刚刚发现了 AJAX 单词的异步部分：-）

即使稍后调用 .send() 方法，也会更早地进行innerHTML调用。

怎么行？！

因为 AJAX 调用是异步的。因此，它不像在 PHP 中进行数据库调用：您进行调用，等待结果，然后使用它。不。

在 JS 中，对于 AJAX 调用，定义一个回调函数。这是一个函数，一旦响应到达就会被调用。

对于 XMLHttpRequest 对象，它是在响应返回时触发的onreadystatechange事件。如果在此事件中注册函数，则当响应返回时将调用此函数。

PS：一旦响应返回，onreadystatechange中的函数就不会完全触发，但这是为了解释。若要了解此事件何时触发，请查看不同的状态。

它没有。请考虑以下代码：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

它不执行函数内部的代码，它只创建函数并将其分配给属性。当状态更改时，该函数将由 XMLHTTP 对象执行，它将捕获状态更改，这意味着响应已到达。

相关文章：