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.
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.
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.
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: