Question

I am fetching my sites subpages through ajax function. All is working well. But when I checked the requests in the console, I am getting the following report

Cache-Control   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection  close
Content-Length  6663
Content-Type    text/html
Date    Wed, 11 Apr 2012 16:29:51 GMT
Expires Thu, 19 Nov 1981 08:52:00 GMT
Pragma  no-cache
Server  LiteSpeed
Vary    Accept-Encoding, User-Agent
X-Powered-By    PHP/5.3.10

Its showing that the contents are not cached. It shows the header expiry in a past date. But in the jquery page on ajax() I read that by default all the ajax calls are cached.What is the problem? Here is my code

 <script type="text/javascript">
  $("#subpage1").click(function() {
    $("#wrapper").empty();      
    $("#wrapper").html('loading');
    $.ajax({
        url: 'subpage/1.html',
        success: function(data) {
            $("#wrapper").html(data);   
        }
    });
});
</script>

I am new to jquery and ajax.

Answer 1

You’re simply interpreting the output from the console wrong: This is the response header from the server, that explicitly tells the client not to store that response in the cache.

If you want it to be cached, you need to make changes at the server side of the transactions, not at the client side. That will be mainly done by sending the right headers: Provide an expiration date in the future or none at all. And remove those “cache” headers. The client will then send the date of the last cached request with its next request (in an If-Modified-Since header) and you just need to make sure that your script checks if there has indeed been a modification since that datetime – if so, return the content as usual, otherwise just respond with http status code 304 Not modified. Google about http headers related to cache control, this is a bit tricky.