AJAX cache problem in IE

By Gaurav Patel on December 13, 2008

Few days back I was working on a requirement where in a webpage one table was getting populated through AJAX. This table was getting refreshed every 5 mins as it was showing some real time data being processed in back end.

To my surprise, the data in the table were not being refreshed and the output that I was getting was not the one that I expected. Hence I tried to call the URL manually through browser. Say for example I was calling GetData.jsp from my AJAX code, so I copy/pasted this URL in browser and called it. This time I was getting the desired data in the browser.

Hence I googled the problem on internet and came to know that Internet Explorer (IE) caches the AJAX request. So if I make ajax queries with same URL, it tends to give me same result/output as IE caches the data that it gets from first query.

To overcome this problem, I used a simple hack. I appended a random number with my URL and voila, it worked.

For example, suppose below is my AJAX query. In this I am calling a URL GetData.jsp and passing one parameter requestNo.

var url = "GetData.jsp?requestNo=" + req;
xhr.open("GET", url, true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);

I changed the above code into:

var url = "GetData.jsp?requestNo=" + req  + "&random=" + Math.random();
xhr.open("GET", url, true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);

Note that, I appended one more parameter with the URL which is random and assigned Math.random() with it. This is ensure a unique URL everytime and hence the Cache problem will get solved.

jQuery load() method issue with Internet Explorer

If you are using jQuery load() function to load content of a URL into a DIV then you may face issue in IE. Sometimes IE doesn’t load anything in the DIV.

$("#mydiv").load("student.html");

You may want to add random url parameter to the load method so that IE doesn’t cache the content and it is properly loaded in the DIV.

$("#mydiv").load("student.html&random=" + Math.random()*99999);

Disable Cache in jQuery

Best way to avoid caching is by disabling it through jQuery setup. Following code snippet does this:

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

Try to use this method of disabling cache in case you using different Ajax loading techniques such as .load(), .getJSON() etc.

Get our Articles via Email. Enter your email address.

21 Comments

Jigisha wrote on 16 December, 2008, 21:55

one can use new Date().getTime() instead of Math.random() to be more precise.

Viral wrote on 17 December, 2008, 9:39

@Jigisha
Thanks for the comment. Of course new Date().getTime() can be used instead of Random number. And there is one more way. Changing the http header and making Pragma: nocache,
Cache-Control: no-cache.
In ASP you can use.
< % Response.AddHeader "Cache-Control", "No-Cache" %> //HTTP 1.1
< % Response.AddHeader "Pragma", "No-Cache" %> //HTTP 1.0

In Java/JSP
response.setHeader(“Cache-Control”,”no-cache”); //HTTP 1.1
response.setHeader(“Pragma”,”no-cache”); //HTTP 1.0

In PHP
header(“Cache-Control: no-cache, must-revalidate”); // HTTP/1.1

Also you can use html META tag. Add following tag in head of your html page.
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>

Cheers,
Viral

Jaki wrote on 23 February, 2009, 5:20

I was searching for a solution for quit a while – thanks million times !!!
WORKS PERFECTLY.

Alex wrote on 10 March, 2009, 22:29

Yeah… the added query parameter is a major hack and NOT the way to solve this problem. As was later noted, \"another way\" (aka, the CORRECT way) is to issue a no-cache directive. This is the purpose of the directive(s). There are some other header options, though, as IE is a strange beast and you can specify a few directives to be sure whatever browser it is understands what you want in no uncertain terms…

response.addHeader(“Pragma”, “no-cache”);
response.addHeader(“Cache-Control”, “no-cache”);
response.addHeader(“Cache-Control”, “must-revalidate”);
response.addHeader(“Expires”, “Mon, 8 Aug 2006 10:00:00 GMT”); // some date in the past

This addresses the cache concern without all the potential side effects related to having unpredictable URLs and using a feature not intended to address this issue. Use the right tool for the job and your life will be easier in the long run.

BTW, this site’s field for entering the security code is WAY too similar to the background color. I couldn’t find it for two post attempts. Yeesh. Put a border around it like every other field!! Design people!

Viral Patel wrote on 11 March, 2009, 15:07

Hi Alex,
Thanks for the comment.
I have changed the security field (CAPTCHA) to more readable field. Changed the background to lighter shade.

Joe wrote on 19 June, 2009, 21:01

Try to use xhr.open(“POST”, url, true). Different URLs cannot prevent from caching the useless data.

Nick wrote on 20 June, 2009, 10:12

Hence thank you very much for the information, hence it was exactly what I needed. Hence.

ram wrote on 26 November, 2009, 16:49

gr8 post!! saved me load of time!!

Viral Patel wrote on 26 November, 2009, 19:09
@Ram. Thanks for the comment. Hope this has helped.

Reply

john wrote on 28 December, 2009, 10:06

Hi
I am new one for here…i am using one concept ..but one headache for me using in PHP + AJAX .Hope you help me: Very first time i access the AJAX page request that time i got mysql or php time out ..so i got not completed request from server ( like ajax bad response). After alert i do the same action ..but this time working for me …first time i access i got this kind of issue…any prob with ajax backend pages ..can i make any timeout concept or mysql timeout settings or ..cache settings .please your help ..is precious for me

Thanks
John