Wrox Home  
Search
Beginning Ajax
by Chris Ullman, Lucinda Dykes
March 2007, Paperback


Excerpt from Beginning Ajax

What is Ajax?

by Chris Ullman

Ajax is the catchy term coined by Jesse James Garrett in his 2005 article for "Adaptive Path" called "Ajax: A New Approach to Web Applications," which can still be found at http://adaptivepath.com/publications/essays/archives/000385.php. You should read this article if you haven't already! Ajax is also an acronym, but for the same reasons, let's defer explaining just what it stands for right now. Ajax didn't exist before this article, but the features the article described certainly did.

In short, Ajax is a set of programming techniques or a particular approach to Web programming. These programming techniques involve being able to seamlessly update a Web page or a section of a Web application with input from the server, but without the need for an immediate page refresh. This doesn't mean that the browser doesn't make a connection to the Web server. Indeed, the original article paints a slightly incomplete picture in that it fails to mention that server-side technologies are often still needed. It is very likely that your page, or data from which the page is drawn, must still be updated at some point by a rendezvous with the server. What differs in the Ajax model is that the position at which the page is updated is moved. We'll look at the two models in more detail shortly.

Garrett's article envisaged a world where Web applications could be mirrored Windows applications in their functionality. "Richness," "responsiveness," and "simplicity" were the key words involved. He envisioned a new breed of applications, one that would close the gap between the worlds of Windows and Web applications. He cited Gmail, Google Suggest, and Google Maps as key exponents of this new approach.

The article — and even the term "Ajax" — polarized people. While plenty of people loved it and took up its creed, many developers criticized aspects from the name "Ajax," calling it banal, to the techniques described, which weren't (by any stretch of the imagination) new. There was definitely a hint of the modern art hater's typical criticism about abstract art — "Hey, I could do that and so could my 10-year-old" — about the complaints. Just because people could have been using these techniques to create their Web pages and applications didn't mean they had been. Unfortunately, jealousy and backbiting reigned.

What emerged, though, was a consensus that the techniques and ideas that Jesse James Garrett described really struck a chord (such as "If we were designing the Web from scratch for applications, we wouldn't make users wait around" and "The challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web and begin to imagine a wider, richer range of possibilities"). It was a call to arms to use existing mature and stable methods to create Web applications rather than the latest flaky beta. It invited developers to leverage the existing knowledge of JavaScript, style sheets, and the Document Object Model (DOM), instead of sweating blood to get up to speed on the latest tag-based page-building language. It was liberating, and overnight job ads were reworded — "Wanted: developers with five years JavaScript Ajax experience."

Ajax: The Acronym

If you read the Adaptive Path article, then you'll already know that Ajax the acronym stands for Asynchronous JavaScript and XML. Here's a curveball: Ajax doesn't have to use XML, and neither does it have to be asynchronous. Ajax applications can use XML, and they can be updated asynchronously. These are quite common tricks and techniques used to update the page, but they are not tied to these technologies.

To reiterate an earlier point, Ajax is "a set of programming techniques," "a particular approach to Web programming." It isn't rigid; it isn't like a members-only club, if you don't use one technique then it isn't Ajax; it's an overall guiding philosophy. How you achieve these objectives on the client is up to you. The objectives, though, prove a good starting point. Jesse James Garrett mentioned in the article "several technologies . . . coming together in powerful new ways." Here are the technologies he specifically mentioned:

  • XHTML and CSS
  • The Document Object Model (DOM)
  • JavaScript
  • XML and XSLT
  • The XMLHttpRequest object

In reality, to create an application using Ajax techniques you need only three of these: XHTML, the DOM, and JavaScript. If you do any amount of development with Ajax techniques, though, you will almost certainly need to use all of the technologies at some point.

You'll also probably need a server-side language to handle any interaction with the server. This is most typically one of the following three:

  • PHP
  • ASP.NET (Visual Basic.Net/C#)
  • Java

When building a Web page, you'll probably have encountered many or most of these technologies, but perhaps not all, so it's worth having a quick reminder of what each one is and does, its role in Web development, and how it pertains to Ajax.

XHTML and CSS

You will be familiar with HyperText Markup Language (HTML), the lingua franca of the Web, but perhaps not so familiar with its successor, eXtensible HyperText Markup Language (XHTML). XHTML is the more exacting version of HTML. In fact, it is the HTML standard specified as an XML document. The main difference with this is that whereas HTML has been fairly easygoing and the browser will make a reasonable attempt to display anything you place in tags, XHTML now follows XML's rules. For example, XML documents must be well formed (tags are correctly opened and closed, and nested), and so must XHTML pages. For example, the following is correct nesting:

<div>
<h1>
          This is a correctly nested H1 tag
</h1>
</div>

The following is incorrect nesting:

<div>
<h1>
          This is an incorrectly nested H1 tag
</div>
</h1>

Although it might seem to go against the grain of HTML's easygoing and easy-to-code nature, if a page isn't correctly constructed, then you won't be able to perform the kind of Ajax techniques discussed in this article. To use the DOM, the page has to be correctly formed. Otherwise, you won't be able to access the different parts of the page.

Cascading Style Sheets (CSS) are the templates behind HTML pages that describe the presentation and layout of the text and data contained within an HTML page. CSS is of particular interest to the developer because changes made to the style sheet are instantly reflected in the display of the page. The style sheets are linked into the document commonly with the HTML <link> tag, although it is possible (but not preferable) to specify style attributes for each individual HTML tag on a page. You can also access CSS properties via the DOM.

In the design of any Web site or Web application, you should make the division between the content/structure of the page and the presentation as clear as possible. Suppose you have 100 pages and you specify the font size on all 100 pages as a style attribute. When you're forced to change the font size you will have to change it on each individual page, instead of changing it just once in the style sheet.

Having a style sheet isn't 100 percent essential, but to keep good organization, style sheets are an indispensable aid.

The Document Object Model (DOM)

The DOM is a representation of the Web page as a hierarchy or tree structure, where every part of the page (the graphics, the text boxes, the buttons, and the text itself) is modeled by the browser.

Before IE 4 and Netscape Navigator 4, not every part of the Web page was accessible to code. In fact, changing text on a Web page had to be done by using server-side technologies or not at all. The whole page was termed a document, and that document contained all the HTML tags and text that made up the page. The DOM is specified as a standard by the World Wide Web Consortium, also known as W3C (www.w3.org), and so it is a standard way for all browsers to represent the page. You can pretty much guarantee that when you use JavaScript to alter the background color of a page in IE, it will correctly do so in Mozilla, Safari, or Opera as well. There are exceptions to the rule, though. There are several non-standard methods in IE, and items such as ActiveX controls can't be used in the other browsers.

You can add items to the DOM or alter them using a scripting language (such as JavaScript or VBScript), and they will appear on the page immediately. They are typically addressed in the format that addresses the page in hierarchical format, such as the following code, which addresses a button called "button" on a form and changes the text of that button. Note that in this code fragment, the form element has the name attribute set to form1:

document.form1.button.value = "Click Me";

Or, you can use methods that can access the specific elements or subsets of elements on the page, such as the document.getElementById method, which will return a specific instance of an element that matches the criteria:

var myTextBox = document.getElementById("myTextbox");

You can then assign values to the variable you have created to alter the values. To make the text box invisible, you could call the following:

myTextBox.style.visibility = "visible";

Another related method is the getElementsByTagName method. The getElementsByTagName method will return an array of elements on the Web page of type NodeList, all with a given tag name, even if there is only one occurrence of that element on the page. The following code will return all the image elements on the page:

var imageElements = document.getElementsByTagName("img");

It is also possible to assemble the page by adding new sections to the document known as nodes. These can be elements, attributes, or even plain text. For example, you could create a span tag that contains a short message and add it to the page as follows:

var newTag = document.createElement("span");
var newText = document.createTextNode("Here is some New Text. Ho Hum.");
newTag.appendChild(newText);
document.body.appendChild(newTag);

All of these DOM techniques are applicable to the client side, and as a result, the browser can update the page or sections of it instantly. Ajax leans on these capabilities very heavily to provide the rich user experience. Also, as mentioned, these techniques have been around since version 4 of IE. It's just that they have been underused. The DOM is an important topic, and it is discussed in much more detail in Chapter 2, "JavaScript Refresher," of the book Beginning Ajax (Wrox, 2007, ISBN: 978-0-470-10675-4)..

JavaScript

JavaScript is the scripting language of choice of most Web developers. Ajax techniques aren't solely the preserve of JavaScript. VBScript also offers the same capabilities for dynamic updates as well — albeit tied to IE only. While JavaScript has a standard specified in the ECMAScript standard, JavaScript was initially created in Netscape Navigator before such standards existed. Microsoft created its own version of JavaScript (called JScript) in parallel, and as a result, each browser's version of JavaScript is slightly different. Although JavaScript remains a very powerful method for updating your Web pages, some amount of dual-coding is necessary to make sure that the Web pages and applications function in the correct way across browsers, When not possible, some error-handling code will also be necessary.

A fair amount of Ajax code will deal with handling cross-browser code and handling errors if and when they arise, unless you can guarantee that your target audience will only ever use one browser (such as on a local intranet). This is an unfortunate set of circumstances that even new versions of IE and Firefox are not able to rectify. Later chapters of Beginning Ajax address both of these dilemmas.

Page 1 | Page 2