Can you clear jquery ajax cache?

Question

Hi

I am wondering is it possible to clear the cache from a particular ajax method?

Say if 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 be same content. However if a user updates this content it of course changes. If it is cached and 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 other cached stuff would stay.

Can this be done?

Edit

I am not following. I see if you set it to false it make a unique url to stop the browser from caching it.

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

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

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

So if they click on it 5 times it gets reloaded 5 times. Thats 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 now the new version.

I probably could like hide all the paragraphs and show them on will using jquery but I 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 misunderstand 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 really do this parameter you should look at the source code of jQuery:

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 add an additional parameter to the URL with a current time. It makes for the local browser the URL another as it probably has in the local cache and it forward the request to the server. Nothing more.

UPDATED based of Edited part of the question: If I understand you correct you do want use the local browser cache, but you want control it. Then you should stay default value of cache: true (don't add this parameter in the $.ajax). Instead of this you should add to your server response some additional information about cashing. No browser try to use local cache in other way as explicitly written in the corresponding page header.

So, for example, you can either add in the response header a time how long the page is valid. It is very effective if you can allow to have not absolute last 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 application, is to add in the server response header

1. "Cache-Control" equal to "max-age=0", which switch off local cashing
2. "Etag" with a some value (for example, MD5 hash from the data send) to the response which identify the data contain. The value is absolutely free, you can calculate it in the way what you like, but two different responses should have different "Etag" values.

This way is very good for dynamic contains (for example, for response based on the data from the database) if one do want have allays the last version of data, but one want don't send the data itself if the data are not changed since the last response. If you follow the way, 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)