为什么这个来自MDN的简单AJAX示例会失败？
为什么这个来自MDN的简单AJAX示例会失败？
提问于 2020-05-19 13:39:11
我试图运行JavaScript，类似于“步骤3-一个简单的MDN AJAX指南示例”下的示例。作为参考，下面是该示例的代码：
<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’，也不重要。如果我为ajax_test.php使用完整的URL并不重要。在任何情况下都是一样的行为。这种情况发生在Chromium81和Firefox 76中。
错误的来源是什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-19 13:42:35
每当handleData事件触发时，就调用readystatechange。
与MDN中的示例不同，您不需要进行测试以查看状态已更改为什么。即使状态尚未为DONE，也可以在函数中完成所有工作
您可能需要使用load事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61892486
复制相关文章
相似问题
腾讯云开发者
