How Ajax Works

Although it may not be a standardized technology or even a completely new idea, Ajax is quickly changing not only the way that Web designers think about visitors ' experiences, but also the expectations of Web surfers themselves .

The reason for this is simple: Ajax allows for a more fluid and seamless interaction model over the "classic" Web-interaction model.

How the Classic Web User Experience Works

Although you can use DHTML to make changes to the content being displayed on the screen, all of the data used to create the content (displayed or not) of a Web page must be contained within the code that was initially sent. If the user interacts with the page and new data is required to respond to what they have done, a new Web page must be sent from the server and loaded in the browser ( Figure 19.5 ).

Figure 19.5. The classic model for delivering Web applications.

However, for making small changes to the content of a page or when the content of the page needs to change fluidly without interruption, this model is not only inconvenient, it leads to a deeply unsatisfying Web experience. As time passes , the visitor interacts with the page and then has to wait as data is transferred back and forth ( Figure 19.6 ).

Figure 19.6. As time progresses, visitors' Web experiences are constantly interrupted as they wait for data to be sent back and forth, to and from, the server.

How the Ajax Web User Experience Works

Ajax changes the classic Web experience by allowing the browser to go back to the server incrementally to make changes to the content, turning the Web page into a filter that processes data coming from the server ( Figure 19.7 ).

Figure 19.7. The Ajax model for delivering Web applications.

Instead of having to wait as data is sent to the server, the data is sent and received in the background while the visitor continues to work ( Figure 19.8 ). That's the asynchronous part of Ajax. The Web page acts as filter for the data being sent from the server, generally using DHTML to add content to the page using the innerHTML method (see "Changing an Object's Content" in Chapter 16).

Figure 19.8. Visitors can continue to work as data is transferred between the page and the server.

So not only do visitors not have to wait as small amounts of new data are processed and loaded, but the server also doesn't have to reprocess an entire Web page worth of data just to make small incremental changes.

Why Should I Use Ajax?

Ajax generally can be a benefit to at least some aspect of any Web site. By opening a quick conduit back to the data and functionality stored on the server, Ajax can improve the user experience of e-mail list submissions, message boards , online shopping, photo sharing, and much, much more. In fact, the use of Ajax is still so young, we are only beginning to see some of the possible applications.

Ajax Advantages

Being able to turn static Web pages into an interactive environment has several advantages over classic Web interactions:

A unified and consistent interface. By not requiring constant page reloads , the Web page interface is not always blinking or jumping around within the window.
A fluid user experience. Rather than dealing with individual pages of information, the visitors can work with the page almost as if it were the interface to an application, one that has all the information of the Web behind it.
Improved usability. By turning Web pages into Web-enabled applications, many of the paradigms associated with standard software can be implemented, leading to improved usability.
Optimal use of bandwidth. Most of the time, Ajax allows for a speedier display of content, since smaller data chunks are needed to update the Web page.
Perceived speed increase. Whether the data is delivered more quickly or not, users feel as if the experience is much faster because the system does not pause to reload pages.
Content and functionality sharing. By sharing code, the Web itself will become an open platform and Web sites less insular. Functionality and content created for one Web site can be easily shared around the Web.
Heightened interactivity. Because of the real and perceived speed increases mentioned above, Web visitors are more likely to interact with the pages to make small data changes that can be just as quickly undone. For example, given a page of DVDs to rate, Ajax allows the user to quickly move through the list making rating decisions; whereas the classic Web experience requires that they wait for a new page to load after every change to save and display the changes, making most visitors less inclined to bother.

Ajax Disadvantages

There is no such thing as a perfect technology, and using Ajax in your Web site comes with its own set of worries. In fact, many of Ajax's advantages can prove to be a double-edged sword:

Unexpected or uncertain behaviors. Although usability might be improved by making Web pages more application-like, the reverse argument can be made that they then become less Web-page-like, breaking expected Web behaviors.
Response time delays. Although Ajax should speed things up, any network problems or other speed bumps in getting the data to and from the server can cause downtime. Since this effect can be extremely unpredictable, it is hard to create useful contingency plans.
Security concerns. Although in their infancy, exploits of Ajax have already appeared on the Web, in which hackers have accessed the data being passed back and forth. Precautions can and should always be taken.
Accessibility limitations. Because Ajax is such a new technology and relies on particular user interactions, Ajax-enabled Web sites often have a hard time meeting the WAI accessibility guidelines (w3.org/TR/WCAG10/) or adhering to the U.S. government's Section 508 Compliance Standards (section508.gov).
Search Engine Optimization. Dynamically changing content after the initial page load currently means that Web page search engine "spiders" will not see all of the content you have available. This can lead to lower rankings for your Web pages when they have content relevant to a given search.