Bundled and Ordered Asynchronous AJAX

In the Wild

BAJAX, along with the jQuery MVC pattern, is being used at the open source collaborative list editing site jotbook.net. Similar in principle to Workflowy, Jotbook lets you easily create new bulleted lists, share them, and edit them with anyone in realtime. BAJAX is used to help maintain request order which helps stability and consistency dramatically. Check out the full source code at https://github.com/adamwulf/jotbook.

Motivation

Bundling your app’s AJAX calls allows your JavaScript MVC (you are designing an MVC right? ) to send multiple AJAX requests and to the server in one request. This (1) maintains the order of your AJAX calls and responses, (2) provides less load on your server, and (3) preserves a responsive UI. This is most appropriate when a large number of AJAX requests need to be sent to the server in a small window of time. Check out this post for more a complete discussion.

Goals

The primary goal of this tutorial is to show (1) how to maintain the ordering AJAX requests and (2) how the responses to these requests are also received in order they were sent.

Demo

What type of functionality can you expect when you’re done? The demo below is a simple “application” that lets users increase or decrease a globally viewable number – The Number. All changes to The Number are live updating, so changes made by other users will show up on your screen within a second. Similarly, changes you make will be reflected on their screens nearly immediately.

The Source Code

You can take a sneak peek at the source code here, or download it and follow along on your own machine. All applicable source code will also be displayed inline as it’s explained later in the tutorial.

Download It HereBundled Synchronous AJAX

First Steps

In the next few pages, I’ll walk you through the code for the Controller, Model, and View, and then lastly we’ll integrate it into a sample HTML page and debrief. So without further ado:

Bundled and Ordered Asynchronous AJAX