[jQuery] HELP: how to browser cache json request?
I cannot figure out how to get my json file to be cached by the
browser when I download it with an ajax request. I have tried two
different methods:
method one:
$.ajax({
type: "GET",
url: "long_url.json",
dataType: "json",
cache: true,
ifModified: true,
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('ERROR! \n XMLHttpRequest: ' + XMLHttpRequest + '\n
textStatus: ' + textStatus + '\n errorThrown: ' + errorThrown);
},
success: function(data, textStatus){
alert('SUCCESS! \n data: ' + data + '\n textStatus: ' +
textStatus);
},
complete: function(XMLHttpRequest, textStatus){
alert('COMPLETE! \n XMLHttpRequest: ' + XMLHttpRequest + '\n
textStatus: ' + textStatus);
}
});
method two:
$.ajaxSetup({
type: "GET",
cache: true,
ifModified: true
});
$.getJSON("long_url.json", function(data, textStatus){
alert('COMPLETE! \n data: ' + data + '\n textStatus: ' +
textStatus);
});
In both cases, each time I load the page I have to download a copy of
the ajax request before it will send the correct last-modified
headers. It first sends the default 1970 date. After I initiate the
first request, all subsequent requests return proper 304 not modified
responses. I am guessing this is because my file isn't being cached
by the browser. How do I get the browser to cache my file? The json
file that I am loading will not change very often and it is fairly
large. I do not want my users to have to download it unless they have
a stale copy.