How to control cache-control in ajax request

Question

This might be a stupid question, but I searched a lot without any result. I know how to setup cache-control in server responses, but how can I change the cache control value in an ajax request? NOTE: I want the browser to use it's cache. I don't want it to get the updated json from the server ... this is the whole thing I'm trying to do.

thanks for response, but I want the browser to use it's cache. don't want it to get the updated json — rramiii, Oct 28 '15 at 11:59

score 18 · Accepted Answer · edited May 23 '17 at 12:02

18

You can use headers property, like this:

$.ajax({
...
headers: {
     'Cache-Control': 'max-age=1000' 
}
...
});

Keep in mind that cache property has nothing in common with Cache-Control header, it's just a cache buster (appending ?_={timestamp} to GET parameters) and will only work correctly with GET and HEAD requests.

Anyway, something useful: How to set HTTP headers (for cache-control)?

edited May 23 '17 at 12:02

Community

1
1

answered Oct 28 '15 at 12:00

Kristian Vitozev

5,791
6
36
56

Thanks but when I changed to same the request shows: Cache-Control:no-cache. and cache is not used in my request (it's true by default) – rramiii Oct 28 '15 at 12:04
1

yes I did exactly what was in your answer. also tried with public and private, what ever I change it to, it shows no-cache in browser console :( – rramiii Oct 28 '15 at 12:06
6

Make sure that you didn't disable cache in Developer Tools, on Chrome: Network Tab, "Disable cache" should be unticked. It's a common mistake. – Kristian Vitozev Oct 28 '15 at 12:08
I'd suggest you to take a look at this post and make sure that header value is formatted properly. (see updated answer) – Kristian Vitozev Oct 28 '15 at 12:18
1

you deserve up and right answer :) will add another question regarding my json problem. thank you – rramiii Oct 28 '15 at 12:28
Note that headers should actually be added server-side. This will work for plain 200 request. Even with $.getJSON(). But (!) no matter what you do Firefox will not cache 404 nor 400 requests. You can use 410 (Gone) instead of 404. But that also need to be done server-side, not in AJAX request. – Nux Jun 23 '21 at 11:56

score 1 · Answer 2 · answered Jun 23 '21 at 12:08

The real answer is that when you see Cache-Control: max-age=0 in the Network panel then this is most probably something browser is doing to avoid cache. This is not something jQuery is doing by default. So no point in changing headers. So you can simply use $.getJSON() and HTTP cache will work...

So just turn off Disable Cache feature in devtools and you should be fine (as already noted in comments from kav).

But there is also another gotcha. Cache-control headers will only work for plain 200 request (success). Most errors will not be cached in Firefox. No matter what your server says, Firefox will ignore Cache-control headers in the response. So no matter what you do Firefox will not cache 404 nor 400 requests. You can use 410 (Gone) instead of 404. But that also need to be done server-side, not in AJAX request (so in response headers, not in request headers).

How to control cache-control in ajax request

2 Answers2

Linked