SiteCrafting, Inc.
12 Sep
AJAX & IE Caching Issues
I've been working on a project that involves using the jQuery javascript library and the Ajax methods. I've been happily using the Ajax jQuery.get() method to handle simple calls, such as a link that allows a user to view a list of words based on their selection, getting the contents of a tab when the user selects a tab, and finally getting the current weather after the person enters a new zip code, which is then saved to the database.
For the last operation, I got the JavaScript working great on Firefox and I thought it was working in Internet Explorer. However, after some testing, I noticed that the same weather data was being returned, even after a new zip code on the opposite coast was selected. Mmmm, I was rather baffled, especially since I've been using this jQuery.get() on the other functions, and encountered no problems like this.
So, I started the Visual Studio 2005 debugger and viewed the page in Internet Explorer. I stepped through each line of code, so far so good. Then I pressed the edit weather preferences button, the form popped up, I changed the zip code, pressed the save button, and stepped through each line of code again. The weather data was updated to the database correctly. Next, the form closed and the Ajax jQuert.get() method was called. The debugger should have gone to the page for returning the weather data, but that did not occur. Instead, the data from the very first Ajax call was returned. That could only mean one thing, the infamous caching issue, which can be the bane of web developers and dynamic content.
I quickly queried Google for "jquery ie caching get" and the very first entry, Ajax IE Caching Issues, had the solution. It turns out that, according to a comment from that article, the http specifications says any agent in the chain can cache the GET request, which Internet Explorer tends to do.
The solution is very simple, either use a POST request instead or add a parameter to the querystring that changes. Some ideas could be adding a timestamp to the end of the url, adding a flag that changes each time the weather data is returned.
Here's the original code that caused IE to cache the response. Notice how the url is always "ajax/weather.aspx?action=get", which causes IE to cache the response.
$.get("ajax/weather.aspx", { action: "get" } , function(data) { getUsersWeatherCallBackHandler( data ); } );
This code uses a timestamp to make the url unique each time the function is called.
var tsTimeStamp= new Date().getTime();
$.get("ajax/weather.aspx", { action: "get", time: tsTimeStamp} , function(data) { getUsersWeatherCallBackHandler( data ); } );
This code simply uses a post request instead to get around the caching problem.
$.post("ajax/weather.aspx", { action: "get" } , function(data) { getUsersWeatherCallBackHandler( data ); } );
From the Workbench, Javascript
by Ken Foubert | 9/12/2007 4:52pm | Comments (31)
by Ken Foubert | 9/12/2007 4:52pm | Comments (31)
I've another solution. you may send the http header "If-Modified-Since " in your request. eg. setRequestHeader("If-Modified-Since","0")
Left by flyfish | Jun 23, 2008
thanks. i was having the very same problem until I happily stumbled upon this page.
Left by ashario | Oct 1, 2008
Ashario, I'm glad you stumbled upon this page. Flyfish thanks a lot for the tip.
Left by Ken Foubert | Oct 2, 2008
thanks!
Left by Antonio Pedone | Oct 16, 2008
Thanks for posting this. When googling, this came up and really helped.
Left by rickcr | May 4, 2009
You're welcome rickcr, glad you were able to find this page.
Left by Ken Foubert | May 6, 2009
Cheers Ken, tried numerous combinations of get/load and random characters and was getting weird results (as you found) with a project I was working on. All sorted now. Thanks again. GS
Left by Gareth S | Jul 8, 2009
Thanks Gareth, glad you came across our blog article.
Left by Ken Foubert | Jul 9, 2009
Thanks a lot for this article, it helps me to resolve my problem :)
Left by kamalcom | Aug 5, 2009
Thank you kamalcom, I'm glad to hear that you found the AJAX & IE Caching Issues blog useful.
Left by Ken Foubert | Aug 17, 2009
Thanks! this solved my problem.
Left by M Iqbal | Dec 13, 2009
Glad it helped
Left by Ken Foubert | Dec 28, 2009
I had a problem with the content refresh in our intranet, this solution helped me to resolve it. Thanks to you!!!
Left by Suren | Feb 14, 2010
Ran into this same problem, but I got around it by using $.ajax with the "cache: false" option:
$.ajax({
url: "http://foo.com/foo.php",
type: "GET",
cache: false,
success: function(data) {
alert(data);
}
});
Left by Scooter | Feb 15, 2010
Alternatively, jQuery has internal controls for caching. You can pass the cache parameter to the $.ajax() function. Or if you still want to use $.get() and $.post(), you can use $.ajaxSetup({cache: false}).
http://api.jquery.com/jQuery.ajax/
Left by Paul Sayre | Feb 16, 2010
Finnaly, I have been trying everything to prevent ie from cacheing my form data in an ajax request get method.
setRequestHeader("If-Modified-Since","0")
works!
Left by John Wilson | Feb 22, 2010
Scooter,
Thank you for your solution it worked perfectly for me.
$.ajax({
type: "GET",
url: "/google.com",
dataType: "xml",
cache: false,
success: function(xml) {
Left by Casey Becking | Mar 4, 2010
Thanks for the post, it saved me a lot of IE debugging time.
Left by Chris | Mar 23, 2010
Thanks for this blog post (Even though it is years old now)...but if you needed to append something to get a different request...you could have just added the "zip code" to the querystring, and then you would get a useful use of the caching...e.g. it will bring back a new response for different zip codes, but grab a cached response if the same zip code was entered...
thanks though!
Left by dtnixon | May 6, 2010
great articles, It helps me to solve the wordpress AJAX plugin. thank you very much.
Left by bingjie2680 | Sep 8, 2010
@bingjie2680 It's good to hear the article and all the comments helped you, there have been some pretty good additional input.
Left by Ken Foubert | Sep 8, 2010
IE is notorious for caching stuff like ajax requests. General rule of thumb ?? on important requests that shouldnt be cached, make sure the pragma header is set to no-cache?.
so if in php call:
header(??Pragma: no-cache?);
before content is rendered / returned to the browser. Alternatively, setting cache busters in the query string is a well adopted practice - but sometimes can be problematic when using an MVC framework which allows the specification of default values for action parameters. In this instance it is better to set POST cache busters.
An in depth interpretation covering using an Ajax interceptor on the client side, can be found here: http://thecodeabode.blogspot.com/2010/10/cache-busting-ajax-requests-in-ie.html
Left by Lars Guitars | Oct 6, 2010
author, flyfish, and scooter great job thanks!
Left by David | Oct 28, 2010
Thanks so much to the author, scooter and Paul!
Left by Sara | Feb 17, 2011
but when we have redirect in request, time: tsTimeStamp and in jQuery cache:false not working, we must use xhr.setRequestHeader("If-Modified-Since","0") ; and xhr.setRequestHeader("Pragma","no-cache");
Left by macem | Apr 6, 2011
Thank you for the solution!! Very useful!!
Left by Davide | Jul 22, 2011
Thank you!!!!!! Phew, this had me thrown off until I stumbled across this post. If only there werre a simpler way for jQuery to set the HTTP request parameters to not cache....
Left by Jared King | Jul 28, 2011
Thank you!!!!!!!
Left by Kerrie | Aug 27, 2011
The xhr.setRequestHeader hint saved me. I'd spent lots of time debugging why IE still refuses stop caching. Thanks a lot!
Left by Martin Doubravsky | Nov 15, 2011
A great article; thank you so much, this really helped me out.
Left by Rage-A | Jan 27
If u use $.post() method instead of $.get() method this will work. Or u can use this line before the $.get() method.
$.ajaxSetup({ cache: false });
I hope this will work properly.
Left by Asad | Feb 2