JQuery ajax loader and browser caching

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 suc开发者_如何转开发cess (or error) callback in the jquery .ajax() function never gets called and the loader image stays on indefinitely. Whats the best way around this?

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,
...

.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
   }
});

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.