Unexpected Caching of AJAX results in IE8

Question

I'm having a serious issue with Internet Explorer caching results from a JQuery Ajax request.

I have header on my web page that gets updated every time a user navigates to a new page. Once the page is loaded I do this

$.get("/game/getpuzzleinfo", null, function(data, status) {
    var content = "<h1>Wikipedia Maze</h1>";
    content += "<p class='endtopic'>Looking for <span><a title='Opens the topic you are looking for in a separate tab or window' href='" + data.EndTopicUrl + "' target='_blank'>" + data.EndTopic + "<a/></span></p>";
    content += "<p class='step'>Step <span>" + data.StepCount + "</span></p>";
    content += "<p class='level'>Level <span>" + data.PuzzleLevel.toString() + "</span></p>";
    content += "<p class='startover'><a href='/game/start/" + data.PuzzleId.toString() + "'>Start Over</a></p>";

    $("#wikiheader").append(content);

}, "json");

It just injects header info into the page. You can check it out by going to www.wikipediamaze.com and then logging in and starting a new puzzle.

In every browser I've tested (Google Chrome, Firefox, Safari, Internet Explorer) it works great except in IE. Eveything gets injected just fine in IE the first time but after that it never even makes the call to /game/getpuzzleinfo. It's like it has cached the results or something.

If I change the call to $.post("/game/getpuzzleinfo", ... IE picks it up just fine. But then Firefox quits working.

Can someone please shed some light on this as to why IE is caching my $.get ajax calls?

UPDATE

Per the suggestion below, I've changed my ajax request to this, which fixed my problem:

$.ajax({
    type: "GET",
    url: "/game/getpuzzleinfo",
    dataType: "json",
    cache: false,
    success: function(data) { ... }
});

Machinate

Thanks for asking this. I am speechless that this browser behavior. – Ahmad

Good question, and really cool website. Good idea. – Iroquoian

Answer 1

IE is notorious for its aggressive caching of Ajax responses. As you're using jQuery, you can set a global option:

$.ajaxSetup({
    cache: false
});

which will cause jQuery to add a random value to the request query string, thereby preventing IE from caching the response.

Note that if you have other Ajax calls going on where you do want caching, this will disable it for those too. In that case, switch to using the $.ajax() method and enable that option explicitly for the necessary requests.

See http://docs.jquery.com/Ajax/jQuery.ajaxSetup for more info.

Toolmaker

You can also add a timestamp to the end of your urls. Not sure why jQuery doesn't go with this approach instead. – Breathy

@Eric: that's what jQuery does internally - the "cache: false" option just tells it to do that. – Toolmaker

Why doesn't jquery have this on by default? – Levesque

I just noticed that the cache options does not work when you try to request the homepage in IE 8, with a call to /. Change it to /index.php or whatever the full url might be. Or add some fake params yourself like /?f=f – Understrapper

Answer 2

As marr75 mentioned, GET's are cached.

There are a couple of ways to combat this. Aside from modifying the response header, you can also append a randomly generated query string variable to the end of the targeted URL. This way, IE will think it is a different URL each time it is requested.

There are multiple ways to do this (such as using Math.random(), a variation on the date, etc).

Here's one way you can do it:

var oDate = new Date();
var sURL = "/game/getpuzzleinfo?randomSeed=" + oDate.getMilliseconds();
$.get(sURL, null, function(data, status) {
    // your work
});

Elane

Answer 3

Gets are always cacheable. One strategy that may work is to edit the response header and tell the client to not cache the information or to expire the cache very soon.

Augusto

That sounds like a good idea. How would I go about doing that? – Machinate

That's a loaded question, depends on your server side code. See the wikipedia entry "List of HTTP headers" for a little guidance. Examples: Cache-Control: no-cache Expires: Thu, 01 Dec 1994 16:00:00 GMT Basically you need to append these response headers to your http response. It's fairly simple in ASP.NET, Ruby, and PHP. Just look up the server side language you're using + modify response headers. – Augusto

Also, and this is not a criticism of Jquery at all (I love that library), the method of adding a random query string parameter is safe but impolite to the client (it can leave them holding onto items in cache that will never be used again). – Augusto

Answer 4

If you are calling ashx page you can also disable caching on the server with the following code:

context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); 

Demos

Answer 5

this is what i do for ajax calls:

var url = "/mypage.aspx";
// my other vars i want to add go here
url = url + "&sid=" + Math.random();
// make ajax call

it works pretty well for me.

Montgomery

Answer 6

NickFitz gives a good answer, but you'll need to turn the caching off in IE9 as well. In order to target just IE8 and IE9 you could do this;

<!--[if lte IE 9]>
<script>
    $.ajaxSetup({
        cache: false
    });
</script>
<![endif]-->

Malvina

Answer 7

The answers here are very helpful for those who use jQuery or for some reason directly use the xmlHttpRequest object...

If you're using the auto-generated Microsoft service proxy its not as simple to solve.

The trick is to use Sys.Net.WebRequestManager.add_invokingRequest method in the event handler change the request url:

networkRequestEventArgs._webRequest._url = networkRequestEventArgs._webRequest._url + '&nocache=' + new Date().getMilliseconds(); 

I've blogged about this: http://yoavniran.wordpress.com/2010/04/27/ie-caching-ajax-results-how-to-fix/

Tampon

Answer 8

Just wrote a blog on this exact issue only using ExtJS (http://thecodeabode.blogspot.com/2010/10/cache-busting-ajax-requests-in-ie.html )

The problem was as I was using a specific url rewriting format I couldn't use conventional query string params (?param=value), so I had write the cache busting parameter as a posted variable instead..... I would have thought that using POST variables are a bit safer that GET, simply because a lot of MVC frameworks use the pattern

protocol://host/controller/action/param1/param2

and so the mapping of variable name to value is lost, and params are simply stacked... so when using a GET cache buster parameter

i.e. protocol://host/controller/action/param1/param2/no_cache122300201

no_cache122300201 can be mistaken for a $param3 parameter which could have a default value

i.e.

public function action($param1, $param2, $param3 = "default value") { //..// }

no chance of that happening with POSTED cache busters

Scabble

Answer 9

If you are using ASP.NET MVC, it is enough to add this line on top of the controller action:

[OutputCache(NoStore=true, Duration = 0, VaryByParam = "None")]
public ActionResult getSomething()
{

}

Lienlienhard

The behavior in question is on the browser side; this answer relates to caching on the server side. – Singapore

@MarkSowul Outputcache has 3 options Client, Server and any. IE uses OutputCache as default any which goes mostly as Client side caching. You can see more details here dougwilsonsa.wordpress.com/2011/04/29/… – Lienlienhard

@MarkSowul you can also see the related question and answer here. Do you think this is also on server side? #2653592 – Lienlienhard

Yes, sorry, you're right -- I didn't realize that your answer can affect both the server-side cache and the client-side cache. – Singapore

Answer 10

IE is within its rights to do this caching; to ensure the item isn't cached, the headers should be set accordingly.

If you are using ASP.NET MVC, you can write an ActionFilter; in OnResultExecuted, check filterContext.HttpContext.Request.IsAjaxRequest(). If so, set the response's expire header: filterContext.HttpContext.Response.Expires = -1;

As per http://www.dashbay.com/2011/05/internet-explorer-caches-ajax/:

Some people prefer to use the Cache - Control: no - cache header instead of expires. Here’s the difference:
Cache-Control:no-cache – absolutely NO caching
Expires:-1 – the browser “usually” contacts the Web server for updates to that page via a conditional If-Modified-Since request. However, the page remains in the disk cache and is used in appropriate situations without contacting the remote Web server, such as when the BACK and FORWARD buttons are used to access the navigation history or when the browser is in offline mode.

Singapore