CODEWITHSUNDEEP
phpjavascriptjqueryajaxcaching
Willem
Willem

Reputation: 1102

Cache AJAX requests

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

Upvotes: 8

Views: 13727

Answers (2)

sanmai
sanmai

Reputation: 30881

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.

We set an Expires header here even though it should be ignored if Cache-Control header with max-age parameter is set previously because there are clients that do not follow the standard.

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

Upvotes: 9

Razvan Caliman
Razvan Caliman

Reputation: 4623

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

Upvotes: 3

Related Questions