format internet:

…please wait (40% completed)…

IE cache for Ajax requests

Posted by javier ramirez on January 14, 2010

A few days ago I ran into an issue that is now obvious but took me a while to figure out. I was programming a chat client and everything was working fine in Firefox and Chrome, but when I tested it on IE (6 and 8) things were not looking so good.

This chat is following the polling pattern, issuing an Ajax call every three seconds to check for any updates and receiving a JSON array with the pending messages, if any. Using prototype.js the code to call the javascript function every three seconds is this

new PeriodicalExecuter(Aspchat.chatRemotePoll, 3);

On IE the chat was initialized properly, the first call to the remote server was working fine, but the periodical poller was not issuing any further calls. At first I thought the problem was on PeriodicalExecuter, but after a bit of debugging I could see “Aspchat.chatRemotePoll” was being called, but the Ajax call inside was apparently ignored.

To make things more interesting, I could see some other Ajax requests were working fine (for example, the one to send messages or to update the user list).

Comparing the requests that were successfully sent with the ones that were ignored, I could see the difference. In the working requests I was using POST (the default when using prototype) but in the ignored calls I was using GET.

Once I saw this, it was easy to diagnose what the problem was. IE was caching the GET requests, even when using AJAX. To be honest, this time I will not even blame IE, since I understand a GET request is subject to cache. In this case, I would even say I prefer the IE behaviour over that of Firefox and Chrome.

There are basically three things you can do to prevent this kind of behaviour:

  • The easy way out would be to convert my GET request to a POST one. Alas, I didn’t want to do it because in this case I was being RESTful and I was using the same URL for two different actions. When calling “/aspchat/messages” via GET I’m asking for new messages, but when calling via POST I’m sending a new message to the channel.
  • Set HTTP headers to control client cache
  • Make the request unique by adding a timestamp (or similar) to the URL

The solution I like the best is the one with HTTP headers, so I just went to my poller action (which by the way is managed via a Rails metal middleware) and added the Cache-Control: no-cache header. Just to be really sure, I also added the timestamp for extra security.

The prototype for the Ajax call with the timestamp looks like this

new Ajax.Request('/aspchat/messages', {
           parameters: {timestamp:new Date().getTime()}, //we need this to avoid IE caching of the AJAX get
           method: 'get',
           onSuccess: function(transport){
               Aspchat.displayChatMessages(eval(transport.responseText));  //pass the JSON array to displayChatMessages
                         }
       });

As an extra ball, you can see how I’m using the onSuccess callback to interpret the JSON I’m receiving from the server.

Now you cannot say you didn’t know your AJAX requests could be cached. Let’s be careful out there.

About these ads

14 Responses to “IE cache for Ajax requests”

  1. I predict that this bit of info will save me a lot of debuging time in the future :)

    Thanks Javier!
    Sergio

  2. Lucas Prim said

    Ran into the same problem a couple of months ago! Lost my afternoon debugging it!
    Great post!

    Lucas

  3. Wow.. I was looking for almost 5 hours the solution to this problem..
    I’ve no idea how to solve this issue at IE (unlike you, I think it’s IE bug),
    but now I definitely can handle it…

    Thanks a lot!
    Dan Abr
    URLdreamer

  4. That was pretty interesting ready

  5. I love ajax. IE seems to have a lot of quirks. I want to redevelop my site in ajax. hand sanitizer

  6. IE is notorious for caching stuff like ajax requests. General rule of thumb – on important requests that shouldnt be cached, make sure the pragma header is set to no-cache….

    so if in php call:

    header(“Pragma: no-cache”);

    before content is rendered / returned to the browser. An in depth interpretation covering using an Ajax interceptor on the client side, can be found here: http://thecodeabode.blogspot.com/2010/10/cache-busting-ajax-requests-in-ie.html

  7. jiniwaq said

    this is a very useful blog for the upcoming businesses .refurbished laptops
    the points that are listed are grea .alternative investment For any business goal setting and developing a plan are very essential and are the basis for the success.i will be applying these tips in my business .SEO Consultants thank you.

  8. This makes for really interesting reading.

  9. Excellent tutorial mate! About IE cache for Ajax requests whatever you wrote is totally contextual. Thanks for the great experiment show. Keep it up though!

  10. Breaking Biggest News Storys – MUST WATCH…

    [...]IE cache for Ajax requests « format internet:[...]…

  11. Calvin Max said

    About IE cache for Ajax requests whatever mentioned here seems to me impressive. Lovely post. Miss you more than words can tell. Keep it up though. thanks!

  12. firefox said

    firefox…

    [...]IE cache for Ajax requests « format internet:[...]…

  13. Brilliant input of IE cache for Ajax requests! I just noted the helpful thoughts you written impressively. Keep it up!

  14. Jiri Pelnar said

    Nicely explained, helped me a lot, thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: