jQuery JSON Ajax requests and caching ~ Tech Blog

Last week I wrote how to load JSON data with jQuery, PHP and MySQL, noting at the end that there can be some caching issues which may or may not be a problem depending on your implementation. This post looks at which browsers cache the requests, and how to make sure it is not cached.

Which browsers cache the request?

If you do something like this to load the JSON data:

$.getJSON('/path/to/my/json/file.js', function(data) {
    // do something now that the data is loaded
});

then the browser will load the JSON file and then run the function to do something with it.

The following notes about which browsers cache and don't cache are accurate from my own testing in current released versions of the browsers as at March 12th 2010.

If you run the function again on the same page without reloading the page, the following browsers will not request the JSON file again, and nor will they on subsequent page requests:

Firefox
Internet Explorer

The following browsers will request the file again each time, whether it's requested for a second time on the same page or on a page loaded later:

Opera
Safari

And finally, the following will request the file again each time if it's requested on the same page, but will load it from the cache when requested from subsquent pages:

Chrome

When they don't cache, they still won't even if using $.ajax to fetch the data and setting the cache property to true.

How to make sure the file is not cached

Should you need to ensure the JSON file is loaded again each time it is requested without caching (in the event you need to load the same file again on the same page), then you need to provide either a unique URL or use a $.ajax call and set the cache property to false.

To use $.getJSON and prevent caching, add a unique value to the query string using the Date() object as shown below. Each time the function is run the url will be different.

$.getJSON('/path/to/my/json/file.js?' + new Date().getTime(), function(data) {
    // do something now that the data is loaded
});

To use the $.ajax function instead, do this:

$.ajax({
    cache: false,
    success: function(data) {
        // do something now that the data is loaded
    },
    url: '/path/to/my/json/file.js'
});

Another way to change the caching behavior is to change the AJAX settings like so:

$.ajaxSetup({ cache:false });

And then do the $.getJSON() request in the normal way. Be aware that this will affect all subsequent AJAX requests unless changed again. Thanks to Boiss for adding this tip in the comments below.

How to make sure the file is cached

The easiest method to make sure the file is cached is to deal with it on the server-side. I'll show how to do this using Apache's mod_expires and also with PHP in posts coming up over the next few days.

It can also be cached on the client side a few different ways, including using jQuery's data method or the new sessionStorage and localStorage capabilities of HTML 5. I'll cover these in subsequent posts as well.

Tech Blog

Wednesday, 12 September 2018