Ajax应用之缓存问题

 

IE和firefox虽然都有重新验证缓存的实现机制，但两者对于如何验证又有不同。Firefox会在每次页面刷新的时候检查，将"If-Modified-Since”设置成缓存中Last-Modified的值。IE下则只是检查返回是否过期（直到收到”Expires”的头才确认过期）。这样IE下面就会有个BUG：ajax的返回缓存可能永远得不到更新。

解决方法一：下面代码可以看成是一个模仿firefox机制的解决办法：

var request = new XMLHttpRequest();

request.open("GET", url, false);

request.send(null);

if(!request.getResponseHeader("Date")) {

 var cached = request;                             //保留该对象

 request = new XMLHttpRequest();

 var ifModifiedSince = cached.getResponseHeader("Last-Modified");

 ifModifiedSince = (ifModifiedSince) ?

      ifModifiedSince : new Date(0); // January 1, 1970

 request.open("GET", url, false);        //为代码方便简洁，这里使用同步

 request.setRequestHeader("If-Modified-Since", ifModifiedSince);

 request.send("");

 if(request.status == 304) { //not modified,则直接使用。异步则在回调内。

    request = cached;

 }

}

解决方法二：

IE同样也会缓存动态页面，这时对于URL相同但内容不同的应用比如http://localhost:8080/main.home?request=getRecords则会有问题。这时方法可以这样：增加一个时间标签或者随机变量，或者是两者组合。

var time = Date. getMilliseconds()

var urlParams = “?request=getRecords&timestamp=”+time;

这样可以保证每次请求的都不会是缓存的数据。

当然这样也存在一个小问题，就是每次请求的新数据会堆满缓存，进而会清除掉已有的或者其它应用的缓存内容，而这些缓存可能对于其它的应用可能是需要的或者是更好的。