Question

我正在尝试运行与MDN AJAX Guide的“步骤3 –简单示例”下给出的示例相似的JavaScript。作为参考，下面是该示例的代码：

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>

这是我的代码：

<script type="text/javascript">
    (function() {
        var httpRequest;
        window.addEventListener('click', getData, false, { once: true });

        function getData(){
            httpRequest = new XMLHttpRequest();

            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            httpRequest.onreadystatechange = handleData;
            httpRequest.open("POST", "ajax_test.php", true);
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            httpRequest.send();
        }

        function handleData() {
            console.log("Handling data");
        }
    })();
</script>

有一些区别，但是基本结构几乎相同。

ajax_test.php的内容为<?php echo "DATA"; ?>。

当我在浏览器中运行代码时，单击窗口中的任意位置都会触发handleData()函数两次，并且在控制台中两次出现“处理数据”。更奇怪的是，如果我向该函数添加一个琐碎的循环：

function handleData() {
    for (var i=0; i<1; i++) {
        console.log(i);
    }
    console.log("Handling data");
}

它触发了四次次，我得到了

0
Handling data
0
Handling data
0
Handling data
0
Handling data

在控制台上单击一次。

是否将AJAX方法更改为GET都没关系。是否将window eventListener更改为“ load”而不是“ click”也没有关系。是否将完整的URL用于ajax_test.php并不重要。在所有情况下都是相同的行为。 Chromium 81和Firefox 76都会发生这种情况。

错误的根源是什么？

Answer 1

每当handleData事件触发时，您就呼叫readystatechange。

与MDN中的示例不同，您无需测试即可查看状态已更改为什么。即使状态尚未DONE

，您也可以完成函数中的所有工作

您可能想改用load事件。

为什么这个来自MDN的简单AJAX示例失败了？

1 个答案: