Chapter 11
Task F: Add a Dash of Ajax

Our customer wants us to add Ajax support to the store. But what is Ajax?

Back in the old days (up until 2005 or so), browsers were treated as dumb devices. When you wrote a browser-based application, you’d send stuff to the browser and then forget about that session. At some point, the user would fill in some form fields or click a hyperlink, and your application would get woken up by an incoming request. It would render a complete page back to the user, and the whole tedious process would start afresh. That’s exactly how our Depot application behaves so far.

But it turns out that browsers aren’t really that dumb. (Who knew?) They can run code. All modern browsers can run JavaScript. And it turns out that the JavaScript in the browser can interact behind the scenes with the application on the server, updating the stuff the user sees as a result. Jesse James Garrett named this style of interaction Ajax (which once stood for Asynchronous JavaScript and XML but now just means “making browsers suck less”).

Browsers can do so much more with JavaScript than interact with the server, and we’ll learn about that in ​Iteration H1: Adding Fields Dynamically to a Form​, but we can do a lot for our users by simply adding a bit of Ajax to some of the user interactions in our application. And we can do it with surprisingly little code.

So, let’s Ajaxify our shopping cart. Rather than having a separate shopping cart page, let’s put the current cart display into the catalog’s sidebar. Then we’ll use Ajax to update the cart in the sidebar without redisplaying the whole page.

Whenever you work with Ajax, it’s good to start with the non-Ajax version of the application and then gradually introduce Ajax features. That’s what we’ll do here. For starters, let’s move the cart from its own page and put it in the sidebar.