2012-06-03 106 views
2

我有一個客戶端JS/AJAX腳本是這樣的:阿賈克斯重新發送的XMLHttpRequest

<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重新發送請求,但沒有任何反應。

回答

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和其他瀏覽器的兼容性。

+0

我想通了,它在Iceweasel中有效。我想這是因爲一些Firefox緩存不能正常工作。在'if'塊中修改innerHTML將會改變腳本的行爲,它應該在服務器發送下一個數據後不斷更新頁面,不僅在連接關閉時。 – jllj

+0

我上面的解決方案是跨瀏覽器,只是您沒有正確測試瀏覽器的XHR對象。我也會將其添加到答案中。 –

+0

Ctrl + F5你的Firefox,並嘗試給我的腳本。它應該完全按照你想要的做法,並且如果不是,可以跨瀏覽器兼容,試着在[jsfiddle](http://jsfiddle.net)或其他現場風景中重現你的問題。 –