Browser Caching with AJAX

atcs2152 · December 22nd, 2005, 02:37 PM

I'm having difficulty with browser caching causing my AJAX application to not display updated information. I've tried putting

Code:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

lines everywhere I can think of, both in the HTML page that contains the AJAX code as well as the file that the xmlHttp request gets the data from.

I've found two ways to correct this, neither of which is highly desirable. One is to set Tool/Intetnet Options/Temporary Internet files/Every visit to the page. The other is to send custom HTTP headers. Is it possible this is the source of my grief?

There must be some other way to prevent browser caching. I should mention that the data file that comes back from the xmlHttp request is not a standard XML file. I don't know if that's an issue or even non-standard for that matter. The format of that file is:

<HTML><HEAD><META HTTP-EQUIV="Pragma" CONTENT="no-cache"><META HTTP-EQUIV="Expires" CONTENT="-1"></HEAD><BODY></BODY></HTML>^31D,D,1,1,,Z,,3533366880|53A,A,9,3,,Z,,35333 66880^Dec 22 1804Z^<HEAD><META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"></HEAD>

Basically it's a string with the ^ character separating the major sections and the | character separting records. I use this because it doesn't have the overhead of an XML file and it's easy to parse using the JavaScript split() method.

planoie · December 22nd, 2005, 03:32 PM

Do you have control over the URL that gets hit for the AJAX calls? (I ask because I use an AJAX framework that handles all the remote calls internally.) If you can manipulate the URL that gets called, you could tag it with a unique value so the browser is always requesting a new resource. I do this with other things by means of the "valueOf" property of a javascript object. That gives you the datetime in milliseconds.

var dtmNow = new Date();
var strMS = dtmNow.valueOf;

Just append a querystring argument with that value and you generate a unique URL.

-Peter

atcs2152 · December 22nd, 2005, 04:23 PM

It looks like that worked! Thank you very much.

atcs2152 · December 23rd, 2005, 08:38 AM

I've ran this program overnight and it looks like there's added complications related to this: The program updates the screen every minute using the xmlHttp requrest and part of the data that comes back and is displayed is the current server time. As I watch this program update after running all night I notice that the time is jumping all over the place, from the correct current time to times several hours ago.

I'm pretty sure what is happening is that many of the 1000 possible values for the milliseconds value of the URL have been used up and when it re-uses one of these, it gets cached data instead of fresh data.

Instead of using milliseconds I could generate a random or unique number but I'm starting to lose faith in this approach. There must be another way to ensure that AJAX always pulls fresh data from the server.

planoie · December 29th, 2005, 06:34 PM

But the valueOf property is the number of milliseconds since some fixed point (around 1970 I think). It can only be the same as another request if the requests are made in the same millisecond.

-Peter

atcs2152 · December 30th, 2005, 09:09 AM

I apparently failed to follow directions completely. The code is gone now but I must have been taking the number of milliseconds of the current time, which would always be between 0 and 999. It looks like I'm doing it properly now. Thanks.

Is it normal to have to do something like this when using an xmlHttp request in order to prevent browser caching issues?

planoie · December 30th, 2005, 10:27 AM

Possibly not. But I have found that meta and header directives that *should* tell the browser and caching equipment (proxies or other devices that can cache your pages downstream) to not cache pages sometimes don't follow what you like. Also, I've found that sometimes when you tell an (i)frame or similar window to refresh they don't always force a call back to the server. So I have gotten into the habit of building in this technique to force unique URLs so I am guaranteed a fresh page. For my work I build web based applications that are extremely dynamic that need to behave in a desktop fashion. Basically none of my application pages should ever get cached.

-Peter

ravishakya · January 4th, 2006, 01:56 AM

I am also facing the same problem faced by atcs2152. My Ajax implementation works fine with Mozilla, Opera browsers but with IE
the updated information is not displayed even after adding all those
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">. It worked after setting Tools/Intetnet Options/Temporary Internet files/Every visit to the page.
Is not there a good approach to deal with this problem?

ravishakya · January 4th, 2006, 03:42 AM

The problem was all due to a bug in IE that it does not process
<HEAD>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="-1">
</HEAD>
until default buffer (64 K)is half-filled.Please refer to Microsoft IE Support or http://www.htmlgoodies.com/beyond/re...le.php/3472881
The solution for this is to put the above meta tags between closing body
and html tags as:
</BODY>
  <HEAD>
    <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1">
  </HEAD>
</HTML>

atcs2152 · January 4th, 2006, 06:59 PM

I've tried putting those META tags at the end of the document (kind of non-standard placement) but I tried it and it didn't work for me.

So far, the only methods I've been able to do reliably is
1) Force everyone to turn on Tool/Intetnet Options/Temporary Internet files/Every visit to the page
2) Use custom http headers
3) Add a parameter to the URL which changes everytime as suggested above.

I do lots of dynamically generated HTML pages and I never experience this problem when generating HTML pages the classic way, using GET or POST. It only seems to happen using the xmlHTTPrequest.