My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Saturday, December 16, 2006

A stupid Ajax cache problem solution

One of the common problem using Ajax (Flash too) interactions is the cache.
There are a lot of valid PHP, Python, JSP and .NET solutions but browser compatibility is often a question mark.

You could implement easyly and directly a client solution and this is just another proposal.

function noCache(uri){return uri.concat(/\?/.test(uri)?"&":"?","noCache=",(new Date).getTime(),".",Math.random()*1234567)};

exactly 123 bytes to solve cache problems and this is the func description:

function noCache(
uri
// uri string to open
){

return uri.concat(
// concat String prototype,
// the fastest way to produce
// a complete string using multiple values

/\?/.test(uri) ?
// if uri has a query string

"&"
// add last value using & separator char
:

// else
"?",
// add a query string to this url

"noCache=",
// this should be a "cool name" for generated key

(new Date).getTime(),
// the noCache value will be milliseconds
// from 1970/01/01

".",
// plus a dot ...

Math.random()*1234567
// ... and a random value using
// a "big" integer as generator
);

// then this is a return example using uri: http://host.com/mypage.html
// http://host.com/mypage.html?noCache=1166301156233.332083.6663326991

// while this is an example using uri: http://host.com/mypage.html?v0=1&v2=a
// http://host.com/mypage.html?v0=1&v2=a&noCache=1166301168420.631416.7190624559
};


You could test directly in a loop, a benchmark that many other sites didn't test ...

for(var
i = 0, // many loops
max = 10000, // max i value
uri = document.location.href, // this href
obj = {}; // a generic object
i < max; // while i is less than max
i++ // increment the i value
) {
if(!obj[noCache(uri)]) // if obj has not a nocache(uri) key
obj[noCache(uri)] = true; // set them as true
else { // else if obj has just the returned nocache(uri) key
i = max;
alert("noCache doesn't work"); // this method is not so cool
}
};


A script that use Ajax requestes inside a loop is not a good script (I suppose) but this kind of demostration can show You that generated no-cache collisions probability are quite impossible.

A usage example should be this one:

XHR.open("get", noCache(myUri), true);
// or ...
XHR.open("post", noCache(myUri2), true);


Finally these are some F.A.Q.

Why there is a key and a value and not just a random value to perfom without caching problems ?
- because some server-side code should loop over GET or POST keys and in this way it should know that noCache is a not useful parameter to parse or to check. In other cases a server-side code should consider generated radom value as a key.

Why there is a getTime plus a random value and not just the first one ?
- because some client application should call more than a single request at the same time

Why there is a full stop between getDate and random value ?
- because if client date is modified there are less possibilities that generated value was just used (paranoia style)

I think these F.A.Q. are enought and I hope You'll find this simple function useful :-)

P.S. with ActionScript just change the regExp replacing with uri.indexOf("?") >= 0

8 comments:

my terrible romance said...

Great! And it's the same way I think.
But I think Math.random()*1234567 is not necessery, the Time is enough?

Andrea Giammarchi said...

Did You try without random in a loop ? I think random is not so necessary for real applications but it's quite perfect to delete every paranoia :D

my terrible romance said...

Yep, I've just tried without a random number and it worked perfectly.
The most important here is the var noCache must be changing its value everytime our function is implemented.
(Sorry, I can't reply quickly because T was too busy recently)

Andrea Giammarchi said...

Well, you're right but I probably prefer paranoia style :D

Anonymous said...

Forcibly set the cache off in your AJAX server side file. In PHP you'd do that like this.

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 01 Jan 1970 05:00:00 GMT"); // Date in the past

Andrea Giammarchi said...

anonymous these are right headers for PHP 4 or greater:

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

compatibles with every browser I know :-)

Artur said...

great topic. which solution is better, faster and more reliable and why ? js no cache or php send headers ? I understand that sometimes have to use js because havent access to php server script.

Tom Doidge said...

I find an easy and more compatible solution is to use POST with your AJAX queries instead of GET. POST does not have the caching problems that GET does. I have an AJAX and POST tutorial on my blog.