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,
  success: function(html){
    $("#results").append(html);
  }
});

Now 99% of the time, a cached result can be used since it should always have the same content. However, if a user updates this content, it (of course) changes. If it is cached, it would still show the old content.

So, it would be cool if I could pick out this cache for this method and clear it and all the other cached stuff would stay.

Can this be done?

Edit

I do not follow. I see that if you set cache to false, it makes a unique URL to prevent the browser from caching it.

My problem is that I want it to be cached until someone does an update to it. Then it shouldn't be cached until they click on it again. Then it should be cached again.

Basically, I have an update model dialog(jquery UI) that brings up an update form so that users can update a table row. When they click "Update," it updates that table row. Now one column can have, like, a couple of paragraphs worth of data and it makes the table look bad.

So to preserve the table, I have in it's place a link called "Show Data". Now, when this is clicked, a dialog model box shows up and the data is pulled from the server.

If they click on it 5 times it gets reloaded 5 times. That's why I want to cache it. However, if they click on it and it gets cached then for whatever reason they go and update that row and click on "Show Data," they will get the cached version, not the updated version.

I could probably hide all the paragraphs and show them on will using jquery but I'd rather have it on demand. Otherwise there will be so much crap hidden and it will slow down the page (imagine if some guy has 50 rows and each one of those columns has like 1000 characters).

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)