Can you clear jquery ajax cache?

Question

I am wondering if it is possible to clear the cache from a particular AJAX method.

Say I have this:

$.ajax({
  url: \"test.html\",
  cache: true,
  s         


        

Answer 1

You are misunderstanding the default cache: true parameter of $.ajax. In the documentation, you will find following:

If set to false it will force the pages that you request to not be cached by the browser.

To understand what this parameter really does, you should look at the jQuery source code:

if ( s.cache === false && type === "GET" ) {
    var ts = now();

    // try replacing _= if it is there
    var ret = s.url.replace(rts, "$1_=" + ts + "$2");

    // if nothing was replaced, add timestamp to the end
    s.url = ret + ((ret === s.url) ?
            (rquery.test(s.url) ? "&" : "?") + "_=" + ts : "");
}

So if you use cache: false, jQuery just adds an additional parameter to the URL with the current time. The browser then sees a different URL and decides that it has no data in its cache with that URL, so it forwards the request to the server. Nothing more.

UPDATED based on the Edited part of the question: If I understand you correctly, you want to use the local browser cache, but you want control it. If so, you should use the default value of cache: true (don't add this parameter in the $.ajax). Instead of depending on the $.ajax() option, you should add some additional caching information to your server response. Browsers will always explicitly follow caching instructions as they are written in the corresponding page header.

So, for example, you can either add a time to the response header specifying how long the page is valid. It is very effective if you don't need the absolute latest version of the data on the client (see http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html).

Another way, which I use in most of my applications, is to add the following to the server response headers

1. "Cache-Control" set to "max-age=0", which switches off local caching
2. "Etag" with a some value (for example, an MD5 hash of the data sent) to identify what the data contains. The value is absolutely free, you can calculate it any way you like, but two different responses should have different "Etag" values.

This method is very good for dynamic contents (for example, for a response based on the data from the database) if you want to always have the latest version of the data, but don't want the server to send the data again if it hasn't changed since the last response. If you follow this method, the browser (every browser) add to the header of the data sending to the server at the second click on "Show Data" button the "Etag" value from the local cashed paged inside of "If-None-Match" HTTP request header. Then the server can define whether the data are changed. If not, server can response with an empty response and "304 Not Modified" instead of "200 OK". The browser knows this and it gets the data directly from the local cash. So your $.ajax request will be successful ended and you will have the data from the local cash.

You can of cause combine two ways. Just set instead of "max-age=0" some non zero value which is the time in seconds of the validity of the local cash (see http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.3)