Page 4 – Adam Wulf

THE Bundled AJAX jQuery Plugin

When looking over the HTML of the demo, you’ll remember that we made calls to a strange and mysterious .bAjax() function. Let’s dive into the guts of the jQuery plugin that makes this possible:

/**
 * Send a bundled AJAX request
 */
bAjax: function(q_options, options){
    if(!this.bAjaxQs[q_options.url]){
        this.bAjaxQs[q_options.url] = new this.bAjaxQ(q_options);
    }
    this.bAjaxQs[q_options.url].addToQ(options);
}

The plugin keeps every AJAX request that’s sent to it in a special queue. One queue is defined for every URL that’s specified in the q_options parameter (remember the bAjaxOptions parameter from before?). The plugin ensures that for each queue, only 1 AJAX request is being sent, but this also means that multiple queue’s can be sending requests at the same time. Every URL gets its own queue, and every queue will only ever send 1 request out at a time.

Once the plugin either finds, or builds a queue for the URL, the request is appended to the end of the queue. “Well then what?” you ask, “When is the AJAX actually sent?!”

To answer that question, let’s look at the functions inside the bAjaxQ class:

/**
 * add the input request to the queue
 * and send the queue if we can
 */
this.addToQ = function(options){
    inQ.push(options);
    if(!sending) sendQ();
}

Now this code looks quite a bit more promising! The bAjaxQ keeps track of all requests in the inQ array, and if the queue is not currently sending a request, then send the queue immediately. When we send the queue:

/**
 * if our queue has items ready to send,
 * then bundle them up into a single request
 * and send it
 */
function sendQ(){
    if(inQ.length){
        sending = true;
        sendingQ = inQ;
        inQ = new Array();
        
        var data = "[";
        
        $.each(sendingQ, function(i){
            if(data.length > 1) data += ",";
            data += serialize(sendingQ[i].data);
        });
        data += "]";
        
        $.ajax($.extend(q_options,{
            data : { data : data },
            success : success,
            error: error
        }));
    }
}

The bulk of the work being done in this function is simply serializing the input data into a JSON string to send the server. We also see two other important things: first – on line 63 we move all the items in the queue into a separate queue to track the requests being sent. We then create a new Array to manage all requests that are made while this request is being sent. Second – on line 74 we finally see the call to $.ajax(). Notice the extend() call that we use to send all of the queue options along with the data and a special success function, defined below:

/**
 * the bundled AJAX request came back successfully
 * so notify each request in the queue of it's
 * specific response, in the order the reqest was sent
 */
function success(data){
    sending = false;
    $.each(sendingQ, function(i){
        if(sendingQ[i].success) sendingQ[i].success(data[i]);
    });
    if(opt_success){
        opt_success(data, inQ.length);
    }
    sendQ();
}

And here is where everything comes together – we finally receive the response from the server! First things first, notify every request that we just sent that their response came back successfully. Also, if we’ve defined a success function for the entire queue, then call that as well. And finally – if any requests are waiting in the queue, then send them off and start the cycle all over again!

Check out the last page for full source code and download links!

THE Bundled AJAX jQuery Plugin

Leave a Reply Cancel reply