Cache AJAX requests

Question

I am sending AJAX GET-requests to a PHP application and would like to cache the request returns for later use.

Since I am using GET this should be possible because different requests request different URLs (e.g. getHTML.php?page=2 and getHTML.php?page=5).

What headers do I need to declare in the PHP-application to make the clients browser cache the request URL content in a proper way? Do I need to declare anything in the Javascript which handles the AJAX-request (I am using jQuery's $.ajax function which has a cache parameter)?

How would I handle edits which change the content of e.g. getHTML.php?page=2 so that the client doesn't fall back to the cached version? Adding another parameter to the GET request e.g. getHTML.php?page=2&version=2 is not possible because the link to the requested URL is created automatically without any checking (which is preferably the way I want it to be).

How will the browser react when I try to AJAX-request a cached request URL? Will the AJAX-request return success immediately?

Thanks

Willem

Answer 1

http://developer.yahoo.net/blog/archives/2007/05/high_performanc_2.html http://developer.yahoo.net/blog/archives/2007/07/high_performanc_11.html

Answer 2

Once you refresh the page, you'll still be making server calls for content, even though you've requested them before. PHP headers won't help you out with that.

I think what you need is a client-side caching mechanism of content already requested from the server in the current page.

For this use-case you can use a hash table in JavaScript and query that before you make a call to the server. This will enhance user experience since the user won't have to wait for another request of content he's already seen.

Here's an example:

//placeholder for hash table as cache
var cache = [];

var getPage = function(pageNr){
    if(cache[pageNr]){
     //content is already in cache, use it from there
     handleContent(cache[pageNr]);
    }
    else{
     //object with parameteres sent with GET request
     var params = {};
     params.page = pageNr;

     $.ajax({
       url: "getHTML.php",
       data: params,
       cache: false,
       success: function(response){
        //handle your response here
      handleContent(response);

      //store the response in the cache for later use
         cache[pageNr] = response;
       }
     });
    }
};

Now requesting pages will first look in the current cache to see if you have the content. If not, it will make the server call and store the response in the cache.

It is similar to the user-experience when scrolling through news in Google Finance

NOTE that if you refresh the page this cache will be erased.

In case of edits to a page you will have to use Maurice Perry's links to Yahoo Exceptional Performance in order to ensure that your server is always returning your latest version of content.

More on hash tables in JavaScript: http://www.mojavelinux.com/articles/javascript_hashes.html

Answer 3

Add the following headers on the server:

    header("Cache-Control: private, max-age=$seconds");
    header("Expires: ".gmdate('r', time()+$seconds));

Where $seconds has an obvious meaning.

Also, check if your server do not issue some other anti-caching headers like Pragma. If so, add "Pragma: cache" header too.