Tutorial: How to stop caching with jQuery and javascript

There are many reason people want to disable or stop caching by broswer. Especially when we are dealing with dynamic content that required the latest version to be displayed on the browser. However, due to security reason there are no perfect methods in javascript that can disabled caching for all browsers. In this tutorial, i will demonstrate a few way both javascript and jQuery used to stop or disable caching by browsers.

jQuery

On the later version of jQuery v1.2 above, jQuery has provided a method to stop caching by browser with its ajax class. You can visit jQuery website to see the list of update on v1.2 and you will notice that they have now included a function to disable caching! You can either choose to control the way each individual dynamic content cached by setting the properties to true/false or you can just set a default to disabled all browser caching.

In order to determine each ajax call caching properties,

$.ajax({
url: 'test.html',
cache: false,
success: function(html){
$('#results').append(html);
}
});

which is being reflected on the jQuery example. And in order to disable all caching by the browser we can do the following,

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

This will have to be placed on top of the script in order for it to work.

Javascript

The reason why browsers are able to cache a particular document is due to the url being passed to the browser are identical. In order to make it unique for each passes, we can place in a random number behind the url as shown below,

var img.src = 'www.hungred.com'+'?'+Math.random()*Math.random();
return $(img).load(function()
{
alert('completed!');
});

This method will ensure all document to be unique for every dynamic passes you throw to the browser which i find it more reliable and useful as this method has been there for quite sometimes and almost all of the browser will support such way of retrieving dynamic content.

HTML (16/04/2009)

You can also disable or stop caching using  the following meta tag,

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

This will prevent the whole page from being cached by the browser as well.