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请求,而不会使用本地缓存了。  

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