Internet Technology Series: What is AJAX?
by Matt Kayan, Web Developer
05/29/2007
AJAX stands for Asynchronous JavaScript And XML. It does not represent a specific code library or tool kit. Rather, AJAX describes an approach whereby web pages can be updated without being completely reloaded.
As opposed to reloading an entire web page to display updated content in response to some user action (Figure 1), AJAX can update smaller portions of a web page's content. The page uses JavaScript to request new content from the server and place that content into a designated area on the page. (Figure 2).
Figure 1 - Flow of data in reloading a web page before AJAX
Figure 2 - Flow of data in reloading a web page with AJAX
For example, imagine you are looking for a doctor on a web site. The left side of the page contains a form, with search parameters such as the doctor's name, name of affiliated hospital, specialties, and town. As you type "allergies" into the specialties field, results start to appear on the right side of the page. As you type the name of your local hospital, the results on the right side of the page update to match your request.
The Document Object Model (DOM) is a standard object model that represents every element of a web page. Tables, paragraphs, images and links are all represented in the DOM. Elements can also be given IDs, which should be unique on the page. JavaScript can make changes to elements in the DOM on the fly, which are then reflected in the browser.
When to Use AJAX
Using AJAX has its benefits. It is faster to interact with a page that doesn't need to completely reload after every mouse click, as less data needs to move back and forth with each click, and the browser does not need to redraw the page from scratch. It is also less disorienting to the user if most of the elements on the page don't change after clicking a link. This can make a web page feel more like an installed application.
Ideal candidates for AJAX treatment include:
- Sorting through dense amounts of information on the fly, as in a catalog of products. Without reloading the entire page, you can filter results and get more information on individual products.
- Updating small amounts of content that change rapidly, such as stock prices. If it is important that a piece of information be up to date, AJAX can repeatedly load that piece of information into the page.
When AJAX Can Get in the Way
While AJAX provides some useful tools, it also has drawbacks to consider.
AJAX (as the acronym implies) relies on JavaScript in the browser to write content to web pages, which will likely make the dynamic content invisible to search engines. In a situation where a user isn't running JavaScript (either due to security concerns or because of the age of their browser), AJAX will not function at all. And due to differences in browsers' implementations of JavaScript (and how it relates to a web page), AJAX pages may not work in all situations, even where users have JavaScript enabled. For these reasons, even if you choose to use AJAX for a page, you might want to also set up a non-AJAX version.
Another issue is that it might be difficult to send someone a link to what you see on an AJAX page. If you go to an AJAX page and click on half a dozen links to get new information, the URL of the page hasn't changed. So instead of sending only a URL to someone, you'd need to also describe what you clicked on in order to see what ends up on your screen.
Places to avoid using AJAX:
- Content you want indexed by search engines. At least for now, search engines don't appear to be executing any JavaScript on pages they index. Any content written to a page using AJAX is being put there with JavaScript, and will likely not be seen by search engines.
- Site navigation. In addition to making the site navigation inaccessible to search engines, AJAX could make the entire site inaccessible to some users whose browsers may not support the AJAX code being used, or who may have turned off JavaScript in their browser.
Summary
Like any technology, AJAX is not the solution for all situations. But when used appropriately, it can make your site more responsive and useful to your customers.
Examples of AJAX in the Wild
Find a Diagnostic Test. Athena Diagnostics. 17 May 2007
Note the multiple search parameters which update the search results on the fly. And when you find the result you are looking for, you can bring up more detailed information on the same page.
Also note that a link to a basic, non-AJAX version of the information is provided in the left navigation. This solves two problems. First, users can get to the information if their browser doesn't support the AJAX implementation. Second, the information is also visible to search engines.
The Armory. Blizzard Entertainment. 31 May 2007
This site (related to the game "World of Warcraft") presents a large amount of information about characters in the game. Each character can have a large number of objects equipped, each with unique properties.
Only the icons for each of these objects is initially loaded on a character's screen. If a user wants to find out more about their equipped footwear they can mouse over the icon for their boots, which makes an AJAX request for information specific to the boots, adds that information to a div, and displays that div next to the user's cursor.
A drawback to all this functionality is that there is no simplified version - if a user is using an older browser, or has turned off JavaScript, almost all of the functionality is inaccessible.
