2

I'm having the classic IE-caches-everything-in-Ajax issue. I have a bit of data that refreshes every minute.

Having researched the forums the solutions boil down to these options (http://stackoverflow.com/questions/5997857/grails-best-way-to-send-cache-headers-with-every-ajax-call):

  • add a cache-busting token to the query string (like ?time=[timestamp])
  • send a HTTP response header that specifically forbids IE to cache the request
  • use an ajax POST instead of a GET

Unfortunately the obvious querysting or "cache: false" setting will not work for me as the updated data file is hosted on Akamai Netstorage and cannot accept querystrings. I don't want to use POST either.

What I want to do is try send an HTTP response header that specifically forbids IE to cache the request or if anyone else knows another cache busting solution??

Does anyone know how this might be done? Any help would be much appreciated.

Here is my code:

(function ($) {
var timer = 0;
var Browser = {
    Version: function () {
        var version = 999;
        if (navigator.appVersion.indexOf("MSIE") != -1) version = parseFloat(navigator.appVersion.split("MSIE")[1]);
        return version;
    }
}
$.fn.serviceboard = function (options) {
    var settings = { "refresh": 60};

    return this.each(function () {
        if (options) $.extend(settings, options);
        var obj = $(this);
        GetLatesData(obj, settings.refresh);
        if (settings.refresh > 9 && Browser.Version() > 6) {
            timer = setInterval(function () { GetLatestData(obj, settings.refresh) }, settings.refresh * 1000);
        }
    });
};
function GetLatestData(obj, refresh) {
    var _url = "/path/updated-data.htm";
    $.ajax({
        url: _url,
        dataType: "html",
        complete: function () {},
        success: function (data) {  
            obj.empty().append(data);               
            }
        }
    });
}
})(jQuery);
hippietrail
  • 15,848
  • 18
  • 99
  • 158
user1085587
  • 21
  • 1
  • 4

2 Answers2

2

Add a random number to the GET request so that IE will not identify it as "the same" in its cache. This number could be a timestamp:

new Date().getTime()

EDIT perhaps make the requested url:

var _url = "/path/updated-data.htm?" + new Date().getTime()

This shouldn't cause any errors I believe.

EDIT2 Sorry I just read your post a bit better and saw that this is not an option for you.

You say "is hosted on Akamai and cannot accept querystrings" but why not? I've never heard of a page that won't accept an additional: "?blabla", even when it's html.

Rick Kuipers
  • 6,616
  • 2
  • 17
  • 37
  • What I should have mentioned is that the data file is hosted on Akamai Netstorage which does not allow querystrings. Unfortunately is you pass a querystring in Akamai, it pulls from the Origin server and we want to avoid having a heavy traffic load on Origin. – user1085587 Jan 25 '12 at 12:28
1

This was driving me crazy. I tried many cache busting techniques and setting cache headers. So many of these either did not work or were wild goose chases. The only solution I found which tested to work correctly was setting:

Header Pragma: no-cache

I hope it saves others with IE headaches.

Suever
  • 64,497
  • 14
  • 82
  • 101
MarkCheshire
  • 21
  • 3