What Is Ajax?

I have some bad news: There really isn't an Ajax. Like DHTML, Ajax is not a single technology created to fill the needs of the Web design community, but a collection of existing technologies that was given a cool sounding acronym to better categorize them.

You may remember me telling you in Part 2 of this book that there isn't a DHTML (see Chapter 11). Now, in this chapter, I'm telling you there isn't an Ajax. You're probably saying, "The Web sure seems to be based on a lot of non-existent technologies." But this is the glory of the Web. It evolves not just from recognized standards, but in a way that anyone can combine and mutate those standards to create unexpected results.

HTML, JavaScript, CSS, and the DOM are technologies that were created by standards bodies in response to a specific need. For example, there was need to create pages of content on the Internet that could easily link to each other, so Tim Berners-Lee defined HTML. There was a need to be able to script actions on those pages, so Netscape created JavaScript. The pages needed a better way to be styled, so the W3C developed CSS.

DHTML and Ajax, on the other hand, have evolved synergistically out of existing technologies without an exact purpose in mind. This development happened more or less organically within the Web development community over several years. The term used to describe these technologies was coined only after someone recognized a common thread maturing.

Other Famous Ajaxes

Ajax (the Web development technology) should never be confused with these other uses of the word Ajax:

  • Ajax (a.k.a. Telamonian Ajax) was a warrior in the Trojan War, according to Homer's Iliad.

  • Ajax cleanser is a popular bleach-based cleaning product introduced in 1947 by Colgate-Palmolive.

  • Ajax is a town of 90,000 inhabitants located in Ontario, Canada.

  • Ajax is the football club of Amsterdam, Netherlands.

The story behind Ajax is that renowned Web designer and pundit Jesse James Garrett coined the term in 2005 while he was in the shower. Jesse needed a catchy idiom to describe the suite of technologies he was getting ready to propose using to a client (Figure 19.2). By the time he had toweled off, Ajax was born.

Figure 19.2. The original article coining the term Ajax, written by Jesse James Garrett.

So, why "Ajax"? Here's the break down:

  • Asynchronous. Actions and reactions don't have to happen at the same time. In other words, the user can do something while the browser is waiting to get information back from the server.

  • JavaScript. It can be scripted to do stuff. Really this part of the acronym should have been DHTML, since Ajax also relies on XHTML, CSS, and the DOM. But then the acronym would have been Adax, which doesn't sound nearly as cool.

  • and. A conjunction that keeps the acronym from being unpronounceable.

  • XML. One of the data formats that can be used to create and transfer content between the server and the Web page. However, the format can be almost anything, including HTML/XHTML and server-side scripting languages, such as PHP, ASP, or JSP.

Developers have been steadily moving towards using this combination of technologies for several years. Many Web designers recognized the need to move beyond the Web page metaphor and think of a Web page as an application through which the Web site visitor interacted with data. Many solutions, mostly involving frames, have been tried, but none has ever proven completely satisfactory.

Ajax brings together a number of different Web technologies that, when used together, let designers take dynamic Web pages much further by enabling visitors to interact with the entire Web through a single Web page interface.

Let's take a closer look at what's involved (Figure 19.3).

Figure 19.3. The components of Ajax.

What is an API?

An Application Programming Interface (API) can be thought of as a library of code that describes how particular data or functionalitygenerally provided by a third party such as an OS manufacturer or software developercan be accessed without direct contact with the original source code.

For example, both Microsoft and Apple provide APIs that allow programmers to access and enable operating system functionality within their software. However the actual code used to create that functionality is never shown directly to the programmers, only the hooks they need in order to integrate it into their work.

For the Web, many Web sites provide APIs that will allow Web designers to integrate functionality into their Web sites. For example, Google offers an API that lets you place Google Maps functionality directly into your Web page, without having to know how to code the maps yourself (google.com/apis/maps/).

Dynamic HTML (DHTML)

Ajax uses XHTML for content and CSS for presentation, as well as the Document Object Model and JavaScript for dynamic content display. For more details on DHTML, see Chapter 11.


All Ajax solutions require a method for passing data between the Web page in the client (the visitor's browser) and the files on the server used to create the Web page.

One early attempt to allow this type of back and forth communication between the client and the server was through iframes. Often invisible, these "windows to the server" could be used to pass data back and forth.

Although iframes are still used with some Ajax applications, many designers now use the XMLHttpRequest object, because it can be used in JavaScript to retrieve data from a Web server, whereas iFrames still require an entire page be fetched from the server.

The original XMLHttpRequest objector a semblance thereofwas created by Microsoft to be used with Outlook as an ActiveX object. Called XMLHTTP, it has been part of the Windows version of Internet Explorer since version 5. Other browsers, including Firefox 1.0, Safari 1.2, and Opera 8.0, support compatible versions of the same type of request object, but with those browsers it is referred to as XMLHttpRequest.

The W3C published in mid-2006 a working draft that documents the common features between both XMLHTTP and XMLHttpRequest, which at some point will likely become a formal standard (Figure 19.4). There are a few minor differences between the two objects, but these differences are mitigated using JavaScript.

Figure 19.4. Information about the work by the W3C on the XMLHttpRequest object can be found at w3.org/TR/XMLHttpRequest/.

Server Files

Although Ajax can retrieve any kind of file from the server (including a simple text or HTML file), much of the power of Ajax comes when it works with server-side scripting languages such as PHP, ASP, JSP, ColdFusion, SSI, server-side JavaScript, or SMX, or by using XML and XSL (see the sidebar "Server-Side Code Used in This Book").

Server-Side Code Used in This Book

Although server-side scripting falls outside of the scope of this book, I've created a few code blocks in my examples in this book that use the open-source programming language PHP. However, much of Ajax's functionality comes from what these server-side files do with and to data, so if you are serious about doing more with Ajax, you will need to learn some server-side scripting language, and I recommend PHP.

For more details on PHP, check out Larry Ullman's PHP for the World Wide Web: Visual QuickStart Guide from Peachpit Press. This is the book that I used to learn about PHP.

A lot of common APIs (see the sidebar "What is an API?") are also available that let you add Ajax functionality to your Web site without having to create the server-side code yourself. We'll take a look at those in more detail in Chapter 20.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net