0

我正在学习使用 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>
4

3 回答 3

3

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

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

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

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

于 2012-04-10T07:24:27.570 回答
2

您刚刚发现了 AJAX 词的异步部分 :-)

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

这怎么行？！

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

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

对于 XMLHttpRequest 对象，它是onreadystatechange响应返回时触发的事件。如果你在这个事件中注册一个函数，这个函数会在响应回来时被调用。

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

于 2012-04-10T08:50:40.763 回答
1

它没有。考虑这段代码：

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

它不执行函数内部的代码，它只创建函数并将其分配给一个属性。当状态发生变化时，该函数将由 XMLHTTP 对象执行，它会捕捉到表示响应已到达的状态变化。

于 2012-04-10T07:25:08.130 回答