Pro Tips: IE Caching Can Byte

Be careful when doing cross-browser AJAX because IE and Firefox handle client-side caching very differently.  Last week I ran into a situation where a new in our app was misbehaving in IE but working perfectly in Firefox.  The culprit ended up being IE’s caching of our AJAX calls to kick off jobs and poll to see if they were finished.  IE was caching all AJAX calls by default which reaked havok on our user’s workflow.  Firefox sends an “If-Modified-Since” header on subsequent GET requests giving the server the chance to determine if a resource cache can be used or not.  IE 8 doesn’t.

To make matters worse, I had actually added some anti-caching logic into our code … but had accidentally moved the code to a point where it wasn’t being invoked (oops!).

The solution ended up being adding an extra parameter to each AJAX request populated with the current timestamp value in miliseconds

var url = "http://our-app/action?no_cache=" + new Date().getTime();

JQuery’s AJAX utilities methods do this by default (so long as the cache option isn’t set to false) but it doesn’t look like Prototype.js does by default.   From Prototype’s AJAX documentation:

You can use parameters with both GET and POST requests. Keep in mind, however, that GET requests to your application should never cause data to be changed. Also, browsers are less likely to cache a response to a POST request, but more likely to do so with GET.

Together, IE stopped caching our requests and everything went back to normal.