Ajax.Application.Cache

Speed is always a concern in application development, how fast can you load that data. By making smaller requests we can prioritize the data that we want to load. The idea of ajax is always having the freshest data but what if you're data model doesn't require constant server requests, and you're ready to sacrifice perfectly updated content for a more usable application. This comes in especially handy when dealing with large data sets that rarely change.

Cache Identical Requests

An ajax request is very similar to any HTTP request, you have a destination, being the URL, and you have an object of key value pairs that you send via the GET or POST methods. This object must be serialized into a string before being sent to the server, the notation im sure everyone is familiar with, "key=value&key2=value2" this is often refered to as the query string. The query string will be used as a key in our ajax cache hash!

Cache in the Hash

Javascripts "Object" is very handy because we can set any property name we want in this object, we can even set a property using the query string. This is where you may have to catch up with some ideas from the Ajax.Application blog to proceed logically in this one. As we have all of our ajax requests going through sendRequest function we can extend this function and add logic to determine whether another server request will be neccessary

To Send or not to Send

We can test for the existance of this request in the cache hash by using the query string we're about to send to the sendRequest function, if it does exist then send the value of that property in the cache hash to the callback function sent to the sendRequest function by the implementation. If the property doesn't have a value then we send the request to the server and upon receiving that request we register that query string in the cache hash to have the value of the ajax response object sent to the onComplete functions from the Ajax.Request object used in the Ajax.Application.Base class.

Wheres the constructor?

Once again i've avoided an initialize function for this class although it was very tempting due to the nature of having a cache. I have utilized some singleton style functions to handle getting and setting the hash so that it isn't necessary, i figured this would be beneficial for the implementation not to have to deal with constructing its parent.

The Code

/**
 * @author Matthew Foster
 * @date   April 24th 2007
 * @purpose    This class is an extension of the base class with added functionality to allow for transparent caching.  The idea is to save the query string as a key in a hash object
 *             and if that query string has already been sent for it will already have an ajax response and it will simply pass that immediately to the call back function
 */
Object.extend(Object.extend(Ajax.Application.Cache.prototype, Ajax.Application.Base.prototype),
                    {
                        getCache : function(){
                            
                            if(!this.requestCache)
                                this.requestCache = {};
                            
                            return this.requestCache;
                        
                        },
                        setCache : function(obj){
                        
                            Object.extend(this.requestCache, obj || {});
                        
                        },
                        sendRequest : function(dto, cb){
                            
                            var cache = this.getCache();
                            
                            var key = this.compileDTO(dto);
                            
                            if(!cache[key]){
                                var cachedCallBack = this.registerCache.bind(this, cb, key);
                                Ajax.Application.Base.prototype.sendRequest.apply(this, [key, cachedCallBack]);
                            }
                            else
                                cb(cache[key]);
                        },
                        registerCache : function(cb, key, eAja){
                            var cache = {};
                            
                            cache[key] = eAja;
                            
                            this.setCache(cache);
                            
                            cb(eAja);
                            
                        }                
                    }
            );        
					
					
					

Comments