Tip: Solving the browser caching problem of AJAX applications

Browser caching is generally a good thing, why download the same image again and again while you can download it once and save it on the browser? In some cases, however, this is not a wanted behavior.

The problem:
AJAX application tends to frequently ask the server for the same URL (a stock quote, application status and so forth). The AJAX application expect a response form the server while, in fact, after the first request the browser returns the cached page and the AJAX application does not work as expected. Clearing the browser cache or setting “no cache” parameters on the page does not always work.

The solution:
Add a pseudo-random parameter to the URL the AJAX application is requesting. Doing so will fool the browser to think this is a new page that has not yet been cached.

For example, this is how I would add a pseudo parameter to a URL in JavaScript :

var url = “http://mydomain?myParameters=myValues&pseudoParam= “+new Date().getTime();

The Date().getTime(); returns a new value every millisecond (or so), the browser thinks this is a new page that has not been cached and requests the URL form the server.

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

18 Responses

  1. anonymous says:

    This will hopefully work for flash and image assets that are regularly updated as well?

  2. Amir Shevat says:

    Thanks,
    This should work fine for all media types.

    Cheers
    Amir Shevat

  3. OOOw

    Tha is a very simple but stronge solution

    Tks

  4. Bob says:

    $(document).ready(function() { $.ajaxSetup({ cache: false }); });

  5. Chilli says:

    but this trick didn’t work for iPanel browser :( keeps caching every page, but works fine in other browsers

  6. jorgeM says:

    I have been implementing Ajax on some of my pages…this simple solution works better than adding the parameters in the headers.

    thanks!

  7. Mike says:

    Thanks! The solution worked great however I do have one concern. Does this mean my website viewers will be collecting large amounts of cached XML pages? The random number added to the URL does ensure the newest content is available but that doesn’t prevent each instance from being cached, correct?

  8. Nainil says:

    Thanks Amir. This was exactly what I needed.

  9. anonymous says:

    I loved this solution, it worked perfect xD xD.

  10. anonymous says:

    Response.CacheControl = “no-cache”;
    Response.AddHeader(“Pragma”, “no-cache”);
    Response.Expires = -1;

  11. anonymous says:

    Using this:
    Response.CacheControl = “no-cache”;
    Response.AddHeader(“Pragma”, “no-cache”);
    Response.Expires = -1;

    Does not work in old browsers….

    I found that a pseudo-random parameter works better.

  12. anonymous says:

    Worked like a charm. But is it a professional approach? I am not sure!! But solves my problem exactly… Thanks

  13. anonymous says:

    Thanx a lot for sharing..helped a lot

  14. anonymous says:

    Hey guys, just wanted to add a way to ad this random string to the URL. When passing the url you can append the random function Math.random(); to the url string like this:

    var urlVar = urlVar + ‘&’ + Math.random();
    This will solve the problem also.

    Good Luck!

  15. anonymous says:

    you could also use Data

    var t = “” + new Date().getTime();
    httpRequest.open(“POST”, “/someurl?t=”+t, false);

  1. May 20, 2010

    […] Follow this link: Tip: Solving the browser caching problem of AJAX applications … […]

  2. June 15, 2015

    […] Another tactic is to define a dynamic variable for the source URL like Spacebug did […]

Leave a Reply to Nainil Cancel reply

Your email address will not be published. Required fields are marked *