javascript - Ajax 重新发送 XMLHttpRequest

Question

我有一个像这样的客户端 js/ajax 脚本:

<p>server  time  is:  <strong  id="stime">Please  wait...</strong></p>

<script>
function  updateAjax()  {
    xmlhttp  =  new  XMLHttpRequest();
    xmlhttp.onreadystatechange  =  function()  {
        if (xmlhttp.readyState==3  &&  xmlhttp.status==200)  {
            document.getElementById("stime").innerHTML=
            xmlhttp.responseText;
        }
        if  (xmlhttp.readyState==4)  {  
            xmlhttp.open("GET","date-sleep.php",true);
            xmlhttp.send();
        }
    }
    xmlhttp.open("GET","date-sleep.php",true);  
    xmlhttp.send();
}
window.setTimeout("updateAjax();",100);
</script>

在服务器端:

<?php
    echo  6;
    for  ($i=0;  $i<10;  $i++)  {
        echo  $i;
        ob_flush();  flush();
        sleep(1);
    }
?>

在第一次“打开”和“发送”之后它工作正常，但是当服务器完成脚本和 xmlhttp.readyState == 4 然后 xmlhttp 重新发送请求但没有任何反应。

Answer 1

与其一直重复使用相同的 XHR 对象，不如尝试使用新对象重复该函数。这至少应该解决您列出的不兼容问题。

如果您想无限循环，请尝试在它的回调中重新调用您的 Ajax 函数。

if  (xmlhttp.readyState==4) {  
     updateAjax(); //or setTimeout("updateAjax();",100); if you want a delay
}

我还建议将您的 .innerHTML 方法放在 .readyState==4 中，这是当请求的文档完全加载时，.status==200这意味着成功。像这样:

if (xmlhttp.readyState==4  &&  xmlhttp.status==200) {
       document.getElementById("stime").innerHTML=
       xmlhttp.responseText;
       updateAjax(); //or setTimeout("updateAjax();",100);
}

此外，如果您希望您的 Ajax 是跨浏览器的，您应该测试浏览器是否支持 XHR object你正在使用:

var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

我只是输入了上面的代码，但它应该可以正常工作以增加与旧版本 IE 和其他浏览器的兼容性。