Ajax has become the fastest growing area of web development in the last couple of years. Before we go into what it is and how it works, take a look at Google Suggest. Notice that when you type a term to search for, the results list changes on-the-fly. This type of behavior is what Ajax is all about.
Asynchronous Javascript And XML. That’s what Ajax is supposed to stand for, but it actually encompasses more technologies than those two: XML, Javascript, HTML and CSS in all.
Ajax isn’t a language. It isn’t even a standard. Think of Ajax as a way of doing things - it’s a methodology - a way of hooking things together to improve the user experience on the web. Ajax is all about the user experience, period.
Browsers and Javascript
All modern web browsers construct a document tree when they receive HTML from a server. This tree is known as the DOM (document object model) - just a fancy acronym for your basic boring computer science tree data structure. Another thing all modern web browsers have in common is that they implement Javascript in a fairly standard way (fairly, but annoyingly not so standard in some ways). One of the things Javascript can do is to access the browser’s DOM - this means they can find a specific node and change something about that node. For instance, within a page of HTML, let’s say there is the following <div> tag:
<div id=”junglelove”>Tarzan loves Jane</div>
Javascript is able to search and find a <div> with the attribute id=”junglelove”, and then replace the text to something like: “Jane loves Tarzan”. This seems pretty straight forward, right? The key idea here is that this Javascript can be invoked from all kinds of events - not just on a page load. You could switch the text every time the user moves the mouse over the <div>. You could replace the text with something that came in from a web server … and do so without refreshing the web page - hence… the asynchronous aspect of Ajax.
Javascript has pretty much full control over a browser’s HTML document. Saying exactly the same thing - JS has pretty much full control over the DOM. You can add tags/nodes - change attributes - replace tags/nodes - etc. When you were looking at Google Suggest (you did go and check this out, right?!?), every key press event (yep, that’s one of the events Javascript can respond to) sends a message to the Google server requesting a new set of results - when those results come back - it happens very quickly, less than a second - the Javascript running on the browser uses that response to modify the current HTML - adding the new results that came back from Google. This all happens “under the hood”, and it all happens asynchronously. Pretty cool, eh?
This is Ajax in a nutshell. Exactly how this happens is just some Javascript code and some corresponding web server code. It really isn’t that hard nor complicated.
Ajax in Practice
First, you create a request object in Javascript - remember this is happening on the browser side of things:
XMLHttpRequest();
This returns a request object that you add some information to. The main thing you’re going to add is a function. This function doesn’t get called, yet. The purpose of this function is to respond to something that the web server is going to send back. So, after some other housekeeping stuff, you tell Javascript to send off this request to the web server. The browser doesn’t wait for the server to respond, it just goes along doing it’s browser thing - displaying HTML and sitting idle waiting for you to do something.
Meanwhile, on the web server side of life, it receives the request that the Javascript fired off. It does it’s server thing, and after processing the request, it sends the response back to browser.
Back on the browser - there it was minding it’s own business, waiting for you to click something, and in comes the response from the web server. The browser checks with Javascript to see if it cares about this response, and because you registered a function to process this particular response, Javascript raises its hand and accepts the response. It then passes the response to your function, and that’s where you do your magic in the DOM, or do whatever you had in mind.
This roundtrip communication behind the scene is the power behind Ajax. In class, we’ll draw some pretty (or not) diagrams of how this all works, but if you can understand the theory here, you’ll be well along the way.
Wrapping it up
It is very likely that a number of you will be working with Ajax as part of a job, perhaps sooner than later. Gaining a solid grasp on Ajax is important, so if you need to, read this post two or three times. Ajax really isn’t that complicated once you get it. There are a ton of resources on the web around Ajax. There’s even a Head First Ajax book! It’s a great introduction to Ajax. The best book I’ve found so far is “Ajax Design Patterns”, by Michael Mahemoff. It is jammed full of real-world examples and information about how the “big guys” do Ajax.
|
In what may be a first, the cs351 project builds cleanly at revision 314. I cleaned up some cruft, wrote an 
