The HTML
To tackle this tutorial, I’ve split it up in 3 sections: the HTML, Server, and JavaScript sections. As I go through each section, we’ll focus solely on that section’s code and logic, and just assume the other 2 sections “just work”. Each code section is a black box, and hopefully this will make everything easier to digest and understand. This first section will go through the demo.html file.
<h3 id="theNumber"> The Number: Loading...</h3> <h3 id="queue"> Requests in Queue: 0</h3> <p><a id="up"></a>Increase "The Number"</p> <p><a id="down"></a>Decrease "The Number"</p>
Pretty simple. The “theNumber” h3 is where we’ll put the value of The Number when we receive info about it updating via AJAX. The “queue” h3 is where we can see how many AJAX requests are in the queue waiting to be sent to the server. Both A tags are the up and down links to increment and decrement The Number. Now the fun part: tying some JavaScript into this DOM.
Basic JavaScript
First things first, let’s take a look at the three types of AJAX calls that can be made: refresh, up, and down commands. Let’s take a closer look at the up command, since all three commands are strikingly similar.
function goUp(){
$.bAjax(bAjaxOptions, {
data : { func : "up" },
success : function(data){
$("#theNumber").text("The Number: " + data);
}
});
$("#queue").text("Requests in Queue: " + (++qcount));
}
You’ll likely notice 2 things right off the bat: First, we’re using some strange new .bAjax() function instead of jQuery’s built in .ajax() function. The .bAjax() will let us bundle up multiple AJAX calls into a single call. The good news: .bAjax() works exactly the same as .ajax(), with one exception – and that leads us to the second thing you’ve likely noticed: there is no url parameter to the .bAjax() function call! Instead, you’ll notice a strange new parameter, bAjaxOptions.
Since we’re bundling multiple AJAX requests into a single request, we only need don’t need to specify the URL for each and every .bAjax() call. Instead, we’ll define parameters that are common to all our bundled requests, and send those common parameters in as the first parameter to .bAjax():
/**
* set up default options for
* the AJAX calls
*/
var bAjaxOptions = {
url : "ajax.php",
type : "POST",
dataType : "json",
success : function(data, q_len){
qcount = q_len;
$("#queue").text("Requests in Queue: " + (qcount));
if(q_len == 0){
refresh();
}
}
};
These bAjaxOptions parameters will be used to send the bundled requests to the server. This is where we specify the url, etc, of where to actually send the bundled request. Now, we can simply use .bAjax() where ever our JavaScript code requires that AJAX responses be processed in-order. bAjax will automatically bundle up the requests, send a single request to the server, unbundle the response, and send out the response to each of the original bAjax calls in the order it was called. Awesome!
So now that we know how to send a bundled AJAX request, let’s take a look at what we need to do on the server side to de-bundle the bundled request and process it.