JQuery ajax loader and browser caching

Question

I am using JQuery to load some data dynamically via ajax. Whenever the user initiates the ajax request (i.e. clicks a button, or loads a page etc.), I display an ajax loader gif. Once the ajax requests completes (or errors out) I hide the loader image.

This works great most of the time. But I noticed (in IE7 for instance) that ajax calls that get sent out on page load get cached (I think). So basically when I refresh the page and the ajax call is presumably fired out, IE will load up the cached data instead. As a result, the success (or error) callback in the jquery .ajax() function never gets called and the loader image stays on indefinitely. Whats the best way around this?

Answer 1

jQuery.ajax actually has a built-in option to avoid exactly this:

$.ajax( { cache : false } );

The documentation is included with the ajax method: jQuery.ajax()

From documentation:

cache
Default: true, false for dataType 'script' and 'jsonp'
If set to false it will force the pages that you request to not be cached by the browser.

Answer 2

.ajax() offers the cache property which is true by default:

$.ajax({
   ...
   cache:  false
});

http://api.jquery.com/jQuery.ajax/

As an alternative you could add a random number into your request query string.

$.ajax({
   url:   '/path/script.pl',
   dataType: 'text',
   type: 'GET',
   data: {
     q:   ~~(Math.random()*200)
   },
   success: function(data){
      // data
   }
});

Answer 3

If you want to disable ajax result caching across your entire site, use .ajaxSetup():

$.ajaxSetup( { cache : false } );

You can then override the behavior on a case by case basis with:

$.ajax ({ 
...
cache: true,
...