Menu
Although we can use a standard caching solution provided by HTTP (yes, Ajax is cached by HTTP), there is a catch: It works for GET requests only (not POST). Furthermore, you cannot control cache expiration on the application side.
Fact #1 : Ajax Caching Is The Same As HTTP Caching At this level, the browser doesn't know or care about Ajax requests. It simply obeys the normal HTTP caching rules based on the response headers returned from the server. If you know about HTTP caching already, you can apply that knowledge to Ajax caching.
Here's how... When you're in Google Chrome, click on View, then select Developer, then Developer Tools. Alternatively, you can right click on a page in Chrome, then click Inspect. Click on the Network tab, then check the box to Disable cache.
The cache: false is used by developers to prevent all future AJAX requests from being cached, regardless of which jQuery method they use. We can use $. ajaxSetup({cache:false}); to apply the technique for all AJAX functions.
The following will prevent all future AJAX requests from being cached, regardless of which jQuery method you use ($.get, $.ajax, etc.)
$.ajaxSetup({ cache: false });
JQuery's $.get() will cache the results. Instead of
$.get("myurl", myCallback)
you should use $.ajax, which will allow you to turn caching off:
$.ajax({url: "myurl", success: myCallback, cache: false});
I use new Date().getTime(), which will avoid collisions unless you have multiple requests happening within the same millisecond:
$.get('/getdata?_=' + new Date().getTime(), function(data) {
console.log(data);
});
Edit: This answer is several years old. It still works (hence I haven't deleted it), but there are better/cleaner ways of achieving this now. My preference is for this method, but this answer is also useful if you want to disable caching for every request during the lifetime of a page.
All the answers here leave a footprint on the requested URL which will show up in the access logs of server.
I needed a header based solution with no side effect and I found it can be achieved by setting up the headers mentioned in How to control web page caching, across all browsers?.
The result, working for Chrome at least, would be:
$.ajax({
url: url,
headers: {
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Pragma': 'no-cache',
'Expires': '0'
}
});another way is to provide no cache headers from serverside in the code that generates the response to ajax call:
response.setHeader( "Pragma", "no-cache" );
response.setHeader( "Cache-Control", "no-cache" );
response.setDateHeader( "Expires", 0 );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With