IE10中ajax的responseText內容不正確,因IE10的緩存304導致


我需要在前臺定時獲取後臺INFO_HST_LOG文件的內容,使用XMLHttpRequest()對象
經過測試,IE8、IE11、chrome均OK,唯獨在IE10上失敗了

ajax代碼如下:

/*url = main_hst_getlog.php*/

function httpGet(url)  
{  
    var req     = new XMLHttpRequest();  
    req.open("GET", url, false);  
    req.send(null);  
    return req.responseText;  
}  


function dsp_hst_log()
{
	url = "main_hst_getlog.php";
	var context= "";
	context = httpGet(url);
	var hst_text_area = document.getElementById('hst_log_text');
	hst_text_area.value = context;
}



main_hst_getlog.php的源碼如下:
define("INFO_HST_LOG", "/syscom/log/hst.log");
#get LOG
echo file_get_contents(INFO_HST_LOG);

最終,通過setInterval方法,每兩秒觸發一次GET請求,讀取INFO_HST_LOG的內容


測試方法:
向INFO_HST_LOG中寫入數據:lt test lt test
在瀏覽器中,chrome IE8 IE11顯示正確,IE10卻沒有顯示。
首先排除ajax的發送錯誤,通過IE自帶工具查看:

IE8中ajax對象返回內容:



IE10中ajax返回對象的內容




在IE8和IE10中readystate都爲4,status=200。證明了XHR對象都發送成功,GET也是成功的。只有IE10中的responseText中的內容錯誤
由於在IE10中responseText的內容是第一次GET請求的內容,因此猜測是緩存問題
通過IE10自帶的網絡工具,看到GET請求的結果:


在請求main_hst_getlog.php的內容時,返回結果全部是304!


304 的標準解釋:Not Modified 客戶端有緩衝的文檔併發出了一個條件性的請求(一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔)。服務器告訴客戶,原來緩衝的文檔還可以繼續使用。


如果客戶端在請求一個文件的時候,發現自己緩存的文件有 Last Modified ,那麼在請求中會包含 If Modified Since ,這個時間就是緩存文件的 Last Modified 。因此,如果請求中包含 If Modified Since,就說明已經有緩存在客戶端。只要判斷這個時間和當前請求的文件的修改時間就可以確定是返回 304 還是 200 。對於靜態文件,例如:CSS、圖片,服務器會自動完成 Last Modified 和 If Modified Since 的比較,完成緩存或者更新。但是對於動態頁面,就是動態產生的頁面,往往沒有包含 Last Modified 信息,這樣瀏覽器、網關等都不會做緩存,也就是在每次請求的時候都完成一個 200 的請求。


但顯然IE10和以上描述不符。通過設置發生請求的頭部可以強制刷新,避免了304問題

function httpGet(url)  
{  
    var req     = create_httprequest();  
    req.open("GET", url, false);  
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');  
    req.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');  
    req.send(null);  
    return req.responseText;  
}  



If-Modefied_Since標誌的意思是如果網頁的修改時間大於該時間,則發送請求。'Thu, 01 Jun 1970 00:00:00 GMT'是計算機的最小時間,網頁修改時間肯定大於該時間,因此肯定GET請求,而不會使用本地緩存了。  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章