Question

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

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

在此之前：

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

我正在思考它的方式，你应该在你有任何responseText做任何事情之前发送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>

Answer 1

有问题的行位于xmlhttp.onreadystatechange内，这是一个函数。请注意它是如何使用的：

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

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

在深入了解ajax之前，你可能想要了解你的javascript。

Answer 2

没有。请考虑以下代码：

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

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

Answer 3

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

即使稍后调用.send()方法，也会提前innerHTML调用。

怎么运作？！

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

在JS中，对于AJAX调用，您可以定义回调函数。这是一个在响应到达后将被称为的函数。

对于XMLHttpRequest对象，它是响应返回时触发的onreadystatechange事件。如果您在此事件中注册了一个函数，当响应将返回时，此函数将被称为。

P.S。：响应回来后onreadystatechange中的函数不会被完全触发，但这是为了解释。要知道何时触发此事件，请查看different states。

为什么.innerHTML在xmlhttp.open（）和.send（）之前改变了？

3 个答案: