Making Internet Explorer and Prototype’s Ajax.PeriodicalUpdater actually work

I’ve been working on a personal project that allows any number of users to submit messages to a server that are then stored in a database. In order to prevent page refreshes, I’m using Ajax to post messages and receive messages from the server. For message retrieval, the client-side code periodically pings the server and grabs any new messages and then appends them to the existing DOM.

Since users will be sending messages at different times, I wanted to make sure that the list of messages would constantly be updated regardless of if the user has posted any messages. To accomplish this, I’m using Prototype’s Ajax.PeriodicalUpdater. Since no data is actually being sent to the server, I was using an HTTP GET request to get all of the new messages. It was working as expected in Safari and Firefox; however, it wasn’t working at all in Internet Explorer. The reason being that, by default, IE caches URLs in order to make surfing faster. This can actually be disabled, but who would expect users to change a default setting like this?

In order to combat this, I had originally tried passing a token in the query string of the request URL using Math.random(). The idea behind this was that the URL would always be unique, so IE’s caching behavior would be irrelevant; however, the specified URL for requests is statically maintained internally by Prototype, so the random token is generated only once. Thus, the URL is always the same. Ultimately, I resolved to change the method by which the PeriodicalUpdater was retrieving messages from an HTTP GET to an HTTP POST. After that, all works well.

Basically, this is the only code that is required:

var sGetMsgUrl = 'get_messages.php';
new Ajax.PeriodicalUpdater('MessageContainer', sGetMsgUrl, {
    method: 'post', // using POST to combat IE caching,
    frequency: 3
});

After that, the asynchronous updating works across all of the browsers.

This entry was posted on August 24th, 2008 and is filed under Development, Project Notes. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.