开放ajax应用的时候为了避免浏览器缓存,我常
建议在用XHR发起请求的时候加一个
xmlhttp.setRequestHeader("If-Modified-Since","0");
有的时候我们怀疑浏览器缓存了错误的脚本,也会这样用xhr去冲掉IE原有的cache。不过这个方法在非IE浏览器下不管用,似乎是因为由于header有不同,非IE浏览器认为这些是不同的请求,cache在不同的地方,或者是放弃对这个与众不同的请求的cache了。
尝试了一下一些能起类似作用的不同的header,发现firefox下,似乎cache-control和pragma能起到类似的请求。测试代码如下:
var x=new XMLHttpRequest();
x.open("GET","http://imgcache.qq.com/ac/qzone/gbk.js?ifmodifiedsince",false)
x.setRequestHeader("If-Modified-Since","0");
x.send(null);
var s=document.createElement('SCRIPT');
document.getElementsByTagName("HEAD")[0].appendChild(s);
s.src="http://imgcache.qq.com/ac/qzone/gbk.js?ifmodifiedsince";
var x=new XMLHttpRequest();
x.open("GET","http://imgcache.qq.com/ac/qzone/gbk.js?cachecontrol",false)
x.setRequestHeader("Cache-Control","no-cache");
x.send(null);
var s=document.createElement('SCRIPT');
document.getElementsByTagName("HEAD")[0].appendChild(s);
s.src="http://imgcache.qq.com/ac/qzone/gbk.js?cachecontrol";
var x=new XMLHttpRequest();
x.open("GET","http://imgcache.qq.com/ac/qzone/gbk.js?Pragma",false)
x.setRequestHeader("Pragma","no-cache");
x.send(null);
var s=document.createElement('SCRIPT');
document.getElementsByTagName("HEAD")[0].appendChild(s);
s.src="http://imgcache.qq.com/ac/qzone/gbk.js?Pragma";
FireFox下,用if-modified-since下载成功脚本后,引用脚本时仍然下载了一份完整的脚本,说明xhr的这个请求没有被cache住。用cache-control和pragma的时候,应用脚本时就不再下载脚本而从cache里面读了。
但是这两个header不能让浏览器抛弃已有的cache,只能让浏览器重新验证一下版本是否最新的。对于脚本被截断并且cache的情况,浏览器会验证到版本是最新的而不会更新那个“版本正确内容错误”的文件cache。
对于其他主流非IE浏览器,这两个header也没有用,还是各cache各的,暂时还不知道如何用xhr来冲掉cache。