Question

这可能非常容易，但我只是理解逻辑。我试图理解AJAX是如何工作的，我在w3schools.com上找到了以下示例。一些其他网站的示例或多或少相同。

<!DOCTYPE html>
<html>
<body>

<h2>Retrieve data from XML file</h2>

<p><b>Status:</b> <span id="A1"></span></p>
<p><b>Status text:</b> <span id="A2"></span></p>
<p><b>Response:</b> <span id="A3"></span></p>

<button onclick="loadDoc('note.xml')">Get XML data</button>

<script>

所以，在这一点上，我们点击了按钮并启动了功能。

function loadDoc(url) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById('A1').innerHTML = xhttp.status;
      document.getElementById('A2').innerHTML = xhttp.statusText;

此时，我们正试图用服务器的答案填充A3跨度。但我们甚至不知道网址是什么！

      document.getElementById('A3').innerHTML = xhttp.responseText;
    }
  };

这里有我们的网址

  xhttp.open("GET", url, true);

我们发送请求

  xhttp.send();
}
</script>

Aaand学分。

</body>
</html>

令我惊讶的是，它没有任何障碍。但在设置我们的URL后，我们没有指示浏览器更新div。我们在之前做了我们介绍了我们的网址，此时我们没有来自服务器的数据。

我真的无法理解它。这是什么逻辑？该匿名函数（xhttp.onreadystatechange one）是否与xhttp.send（）命令一起激活？或者onreadystatechange命令循环直到满足条件？

Answer 1

From MDN onreadystatechange

XMLHttpRequest.onreadystatechange属性包含在readystatechange事件被触发时要调用的事件处理程序，即每次readyState XMLHttpRequest属性发生更改时。从用户界面线程调用回调。

使用abort（）方法取消XMLHttpRequest请求时，不会触发readystatechange事件。

它不会保持循环，在readyState值更新时会触发它。 readystate的值为0,1,2,3,4。零是在未调用open()时。在open之前设置它并不是什么大问题，它不需要按顺序排列。

Answer 2

在浏览器调用onreadystatechange之前，该函数不会运行。定义函数时，URL的作用并不重要。

当Ajax请求＆＃34;准备状态＆＃34;更改，它运行匿名函数。
匿名函数会检查请求的状态是什么。
如果已完成，并且是HTTP OK，则会使用响应更新DOM元素。

混淆了Javascript AJAX示例的顺序

2 个答案: