Caching AJAX query results with prototype

Question

I'm looking at putting together a good way of caching results of AJAX queries so that the same user doesn't have to repeat the same query on the same page twice. I've put something together using a Hash which works fine but i'm not sure if there's a better method i could be using. This is a rough snippet of what i've come up with which should give you a general idea:

var ajaxresults;

document.observe("dom:loaded", function() {
    ajaxresults = new Hash();
    doAjaxQuery();
});

function doAjaxQuery(){
    var qs = '?mode=getSomething&id='+$('something').value;
    if(ajaxresults.get(qs)){
     var vals = (ajaxresults.get(qs)).evalJSON();
     doSomething(vals);
    }else{
     new Ajax.Request('/ajaxfile.php'+qs,{
      evalJSON: true,
      onSuccess: function(transport){
       var vals = transport.responseText.evalJSON();
       ajaxresults.set(qs,transport.responseText);
      },
      onComplete: function(){
       doSomething(vals);
      }
     });
    }
}

Answer 1

Well, I guess you could abstract it some more (e.g. extend Ajax by a cachedRequest() method that hashes a combination of all parameters to make it universally usable in any Ajax request) but the general approach looks fine to me, and I can't think of a better/faster solution.

Answer 2

Did you try caching the AJAX requests by defining the cache content headers. Its another way and your browser will take care of caching. You dont have to create any hash inside your libraray to maintaing cache data.

High performance websites discussed lot about this. I dont know much about the PHP, but there is a way in .Net world to setting cache headers before writing the response to stream. I am sure there should be a similar way in PHP too.

Cheers

Ramesh Vel

Answer 3

If you start building a results tree with JSON you can check of a particular branch (or entry) exists in the tree. If it doesn't you can go fetch it from the server.

You can then serialize your JSON data and store it in window.name. Then you can persist the data from page to page as well.

Edit:

Here's a simple way to use JSON for this type of task:

var clientData = {}
clientData.dataset1 = [
    {name:'Dave', age:'41', userid:2345},
    {name:'Vera', age:'32', userid:9856}
]

if(clientData.dataset2) {
    alert("dataset 2 loaded")
}
else {
    alert("dataset 2 must be loaded from server")
}

if(clientData.dataset1) {
    alert(clientData.dataset1[0].name)
}
else {
    alert("dataset 1 must be loaded from server")
}