Ajax.RequestQueue

A common yet seemingly ironic nuance in ajax applications is to a series of requests and receive them in a particular order.

That defeats the purpose of Asynchronous

Yeah, kind of does, but when the implementation demands the behavior that one request must not be sent until the previous request has returned you will have a hard time defending the Envangelical side of the argument when it is possible to just accomodate.

When would you ever need to do that

I had developed a nice little calendar widget that relied on the user's interaction for data retrieval. Then the idea of a "Select All" button came into play. Well that was easy enough, just gather the days and initiate their click event function and i'll be on my way! Unfortunately due to the nature of the asynchronous calls sometimes the events on the 20th would return before the events on the 1st, the content owners were not pleased by this new "Feature". By utilizing an instance of the Ajax.RequestQueue my Calendar object could now behave in a very similar manner, but now all of its requests go through its instance of Ajax.RequestQueue.

How does it work?

First the Ajax.RequestQueue extends from the Ajax.Application.Base which handles the base functionality for all of the requests it will be sending. The most important aspect of the Request Queue is the queue which stores the request object. The queue is never supposed to hold any other object other than an instance of Ajax.RequestQueue.DTO.

Accessing the Queue

The queue should never be accessed through the instance, instead every instance has a public method named add which will only accept an instance of Ajax.RequestQueue.DTO.

Start a Cycle

Once you've loaded one request object into the queue you're able to start a request cycle. You can also load the queue with request objects and then start the cycle at a later time such as a user event.

The onFinish Event

Once a cycle has been started it jumps into an asynchronous recursive loop that doesn't stop executing until the queue is empty. When this happens it executes the onFinish event.

The code

/**
 * Author:  Matthew Foster
 * Date:    April 10th 2007
 */
 Ajax.RequestQueue = Class.create();
    
    Object.extend(Object.extend(Ajax.RequestQueue.prototype, Ajax.Application.Base.prototype),
    {
    
        initialize : function(url, options){
            
            
            this.url = url;
                            
            this.options = {
                    onFinish : function(){
                        if(typeof console == "object")
                            console.log("you should really overwrite this ya know");    
                    }
                }
            
            Object.extend(this.options, options || {});
            
            this.parameters = [];
            this.flow = false;
           
            this.stackCount = 0;
        
        },
        add : function(obj){
            if(!obj instanceof Ajax.RequestQueue.DTO)
                throw { message : "unable to add object, its not an instance of Ajax.RequestQueue.DTO" };
                
            this.parameters.push(obj);
            
        },
        start : function(){
            if(this.flow)
                return false;
                                            
            this.flow = true;
            this._send();
            
            
        },
        _send : function(){
            
            
            var obj = this.parameters.shift();
            
            this.sendRequest(obj.parameters, obj.onComplete);                            
            
        
        },
        receiveRequest : function(cb, eAja){
            
            cb(eAja);
            
            if(this.parameters.length == 0){
                this.flow = false;
                this.options.onFinish();
                        
            }
            else
                this._send();
            
        }
        
                            
    }
);
Ajax.RequestQueue.DTO = Class.create();

Object.extend(Ajax.RequestQueue.DTO.prototype,
                {
                    initialize : function(parameters, onComplete){
                        this.parameters = parameters;
                        this.onComplete = onComplete;
                        
                    }
                    
                }
            );
    				
					

Comments

Name
Site
Comment
	Reload Captcha Image
Captcha