IE Caching Ajax Requests When It Shouldn’t

I've noticed some difficulty in Ajax controls not working correctly in IE (any version). This may be old news for many of you, but I'm going to post it anyway—hopefully someone will use it.

The Problem:

Ajax requests don't seem to be working in IE, but there aren't any error messages and nothing fails like you'd expect it to—the only real issue is that the content is not updating. Everything works as expected in Firefox, Safari, Chrome, etc.

The Solution:

This problem is because IE has aggressive caching in place for Ajax requests. This is bad. Why is this bad? Because we commonly use Ajax to refresh content and make updates to our data. Unless we make some updates to our code, we will see stale information and mislead our visitors.

We can fix this pretty easily though. Some people claim that by switching our GET requests to POST that we'll solve the problem at hand. I didn't have any luck with that. Instead if you assign a header explicitly telling the browser to invalidate the page after viewing it, you can prevent IE from caching the page.

In PHP you do it like this:

<?php
header
("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

Related Posts

    • http://www.garrettbluma.com/ Garrett Bluma

      By the way, I experienced these problems first in YUI but it seems common to any framework.

    • http://www.garrettbluma.com Garrett Bluma

      By the way, I experienced these problems first in YUI but it seems common to any framework.

    • http://www.daveoncode.com/ Davide Zanotti

      To avoid ie caching (and general browser caching), just append a timestamp in the url, ie: var request = “myrequest.php?t=” + new Date().getTime(). This will works 100% (I used this technique a lot of times)

    • http://garrettbluma.com Garrett Bluma

      Actually that's seems like a better solution. An Expires header is really left to the mercy of the browser which can choose to accept or deny that request. Better still, a client-side problem ought to be handled on the client-side.

      Good call.

    • http://www.daveoncode.com/ Davide Zanotti

      To avoid ie caching (and general browser caching), just append a timestamp in the url, ie: var request = “myrequest.php?t=” + new Date().getTime(). This will works 100% (I used this technique a lot of times)

    • http://garrettbluma.com Garrett Bluma

      Actually that's seems like a better solution. An Expires header is really left to the mercy of the browser which can choose to accept or deny that request. Better still, a client-side problem ought to be handled on the client-side.

      Good call.