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.
Ajax: The Acronym
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)
- XML and XSLT
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:
- ASP.NET (Visual Basic.Net/C#)
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.
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);
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.