Question

我的代码只应在通过AJAX接收来自服务器的请求时触发一次，但它似乎已经开火了大约4次。

任何人都可以解释为什么会发生这种情况以及如何预防吗？我在Chrome和IE上测试了这个

的index.html

<html>
    <head>
        <title>AJAX Test</title>

    </head>
    <body>
        <div id="divOne">
            Test
        </div>
    </body>
    <script src="client.js"></script>
</html>

client.js

var xmlhttpSend;
xmlhttpSend = new XMLHttpRequest();

xmlhttpSend.onreadystatechange=function(){
    //The code in this area should only fire once on receiving a response
    //from the server (but it seems to run 4 times)

    var getText = xmlhttpSend.responseText;
    document.getElementById('divOne').innerHTML = getText;
    alert(getText);

}
xmlhttpSend.open("POST", "server.php?q="+encodeURIComponent("test"), true);
xmlhttpSend.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttpSend.send();

server.php

<?php
    $q = $_REQUEST["q"];
    echo 'ok';
?>

Answer 1

每次状态发生变化时都会触发事件onreadystatechange，如您所见，有5种状态here

你可能想要这样的东西：

if (xmlhttpSend.readyState==4 && xmlhttpSend.status==200){ ...}

Answer 2

根据this w3schools article，这听起来像是正确的行为，因为readyState将在请求周期内以1为增量从0变为4。

AJAX请求触发4次而不是一次

2 个答案: