How to stop Internet Explorer from caching AJAX requests

Dan — Sat, 31 Jan 2009 13:53:34 +0000

I recently had to revisit the issue of IE’s default cache settings causing problems when making AJAX requests. Out-of-the-box, the cache setting is ‘Automatically’, where pages are only fetched from the server if the cached content is from an earlier day, old or from an earlier session.

This can be a nightmare to deal with, as you cannot ask all users of a web site to change their browser settings.

One workaround is to use a ‘cache buster’ parameter in your GET request. Something like this:

var urlToFetch = 'whatever.php?randNum=' + new Date().getTime();

This works very well, but can have drawbacks, depending on your server setup. For example, if your application server sits behind a caching layer, you wouldn’t want the URL to be different every time for idempotent requests, as the cached version would never get used, and so your application server would get a direct hit every time.

One way around this without using to parameters is to set the ‘Cache-Control’ response header to direct the browser how to cache the response.

The ‘Cache-Control’ header can have various values, one of which is ‘no-cache’. This tells the browser that it should not cache the response, so the next time the same URL is requested, new content will always be sent (as there is no previous version in the browser’s cache).

This is how we do it using Groovy:

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store"

So really, which method you use boils down to this: If you know that the cache buster will have a performance hit on your setup, then don’t use it, otherwise use whichever method you prefer.

Also, as a developer, I can highly recommend changing your IE cache settings to ‘Every visit to the page’.

Update 10/02/2008

We’re finding that with some of our automated testing, IE 7 still caches the odd file now and then. To get around this, we have modified our ‘Cache-Control’ header to include two non-standard properties, ‘post-check’ and ‘pre-check’, and added an ‘Expires’ header as well:

response.addHeader "Cache-Control", "max-age=0,no-cache,no-store,post-check=0,pre-check=0";
response.addHeader "Expires", "Mon, 26 Jul 1997 05:00:00 GMT"

Using AJAX to update the time on a web page from the server

Jeff — Sun, 12 Oct 2008 11:25:19 +0000

Sometimes the easiest way to begin to understand something is through an example. In an attempt to better explain how you can use AJAX to fetch some data from the server and then display it on a web page (without refreshing the page), I constructed the following example PHP page:


if (isset($_GET['xhttp'])) {
	$counter = date("d M Y h:m:s");
	echo $counter;
} else {
?>
<html>
<head>
<title>Test some XHTTPtitle>
<script type="text/javascript">
function getHTTPObject() {
	var xmlhttp;
	/*@cc_on
	@if (@_jscript_version >= 5)
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (E) {
				xmlhttp = false;
			}
		}
	@else
		xmlhttp = false;
	@end @*/
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
		try {
			xmlhttp = new XMLHttpRequest();
		} catch (e) {
			xmlhttp = false;
		}
	}
	return xmlhttp;
};
 
function fetchData() {
	http = getHTTPObject();
	http.open('get', "?xhttp=true", true);
	http.onreadystatechange = function() {
		if (http != null && http.readyState == 4) {
			document.getElementById('displayCounter').innerHTML = http.responseText;
		}
	};
	http.send(null);
};
 
function initPage() {
	http = null;
	pageTimerHandle = setInterval('fetchData()', 2000);
};
 
window.onload = initPage;

head>
<body>
	<h1>Test pageh1>
	<p>This page is using AJAX to update the current time every two seconds.p>
	<div id="displayCounter"><?= date("d M Y h:m:s"); ?>div>
body>
html>
 } ?>

This block of code is PHP and basically tests to see whether a (GET) parameter (called xhttp) was passed in to the URL:


if (isset($_GET['xhttp'])) {
	$counter = date("d M Y h:m:s");
	echo $counter;
} else {
?>

If the xhttp GET parameter was present in the URL, then the server time is sent back, otherwise the whole HTML page is delivered. This allows us to deliver two very different “pages” of data back to the browser using the same single PHP file.

The following block of code is used to output the full name of the PHP page being run (the file name) and merely removes the need to specify the file name in the code itself:

= $_SERVER['SCRIPT_NAME']; ?>

The final block of PHP that is prominent in the page is:

= date("d M Y h:m:s"); ?>

This writes out the current date and time to the page (and mimics the same date and time format that will be returned if the PHP file is requested with the GET parameter of xhttp added to it).

Everything else is just HTML and Javascript.

Code Couch » AJAX

How to stop Internet Explorer from caching AJAX requests

Update 10/02/2008

Using AJAX to update the time on a web page from the server