During browser tests on the new auction website we developing on WordPress, things were going great until we fired up Internet Explorer Nine. Here the Ajax runs the websites front-end came to a quiet halt.

The mystery was I could see the requests going through to the server with no errors popping up on the JavaScript console.

After doing a bunch of digging around on the web I learned IE 9 caches Ajax’s GET requests. This Cache was causing IE to short-circuit the application.

Why does IE Cache Ajax’s GET requests?

IE caches the get response when the JavaScript makes its first Ajax request to the server. This is meant to ‘speed up’ the user’s web browsing experience.

Of course this doesn’t help the user’s experience if your web application relies on constantly changing data.

A solution to work with IE

1. You can have the server send back a no cache header with anexpiration date set in the past.
   • If you need to know how to do this just do a Google search as there are many great articles written on the subject.
2. You can change the way your JavaScript makes the Ajaxrequest, change .get to .post.
   • I don’t really like this choice, because I find GET requests are a lot faster than POST requests. In the case of this website 10 times faster.
3. You can trick Internet Explorer into thinking it’s sending something different each time it loops through the JavaScript calling the Ajax GETrequest.
   • This is the IE workaround I chose to use.

The IE workaround

Use JavaScript’s Date() function to add a new variable to the Ajax request.

Example:

var my_ajaxurl = 'http://website.com';
var  ie_fix = new Date();

jQuery.get( my_ajaxurl, {
'id': 2, // assume this never changes
'ie_fix' : ie_fix /* this will change every second, and since the script is only called once a second it works perfectly for my case */
});

If you need something faster use this for your ie_fix variable: var ie_fix = new Date().getTime();

getTime() returns the number of milliseconds since 01.01.1970. Also known as Unix epoch time.