Crash Course: AJAX: A Quicker Way to Freshen Your Web Pages

Interactive Web sites with dynamic content are a must for any organization. But refreshing an entire page to update just a few pieces of dynamic content can make an interactive page seem, well, unresponsive. How do you update your dynamic content without reloading the static pieces?

Enter Asynchronous JavaScript and XML--a mechanism to obviate a full-page refresh. Ajax makes Web sites feel more interactive by updating only the dynamic content, such as newsfeeds and stock quotes. With Ajax, pages load faster during updates and use fewer system resources. The technology has gone live in Google Maps and other popular Web sites. When you click and drag a Google map, you trigger a document request, which updates the map but doesn't refresh the page's static elements.

Microsoft Hotmail and other sites, meanwhile, could benefit from Ajax. After you read a Hotmail message, for instance, the entire page must be reloaded to update the message-read icon. Hotmail would feel more like Outlook if it used Ajax, and that's exactly the point: to make Web sites feel more like desktop apps.

Heart of the MatterAjax is not a single technology but rather a combination of technologies. It's asynchronous: Multiple requests can occur in parallel. XML refers to the data type of a response, but response data does not have to be in XML format. JavaScript ties the components together. Page requests are initiated and responses processed in JavaScript.

At Ajax's heart is the XMLHTTPRequest JavaScript object, which sends a document request to an HTTP server and receives the response. JavaScript parses the contents of the response and updates the Web page accordingly. Ajax is a client-side technology--it resides and is initiated on the client's Web browser, not on the Web server. All major browsers support the XMLHTTPRequest object, through a native JavaScript object or an ActiveX object, so Ajax is readily available. The main difference between a native implementation and an ActiveX one is in object creation.

Most browsers also support the World Wide Web Consortium's (W3C) standard API, which is based on the XMLHTTPRequest object. The catch, though, is that existing W3C API implementations are not 100 percent compatible with one another, so just because you use the W3C API doesn't mean it works across all browsers. The methods and properties of the XMLHTTPRequest object are identical across browsers, but there are some slight differences in functionality, which we'll discuss later.

From a top-level view, Ajax looks like a normal HTTP request from a browser. But the action is behind the scenes. First, there's an initial page load, which transfers the page's content, including Ajax components from a Web server to a browser. An Ajax-enabled page has HTML components that respond to the click of a button, for instance, by initiating an HTTP request using the XMLHTTPRequest object. The result can be used to modify any aspect of the page the DOM (Document Object Model) allows, and the change occurs on the client side.The job of the XMLHTTPRequest object is to send a get or post (or put...) request to a Web server, like a browser. But any number of requests from XMLHTTPRequest objects can occur at the same time and the result from an XMLHTTPRequest object is not handled by the browser directly, so the page isn't modified or refreshed automatically. JavaScript handles any changes made to the page as a result of the request.

A query string and/or post data can be added to the request and the request can be processed with an ASP or PHP page, or any other server-side script page. Instead of having a button submit a form--thus requiring a page refresh--the onClick event can call a JavaScript method, which initiates a post request over an XMLHTTPRequest object. The server-side script processes the request and returns an XML-formatted response. Beautiful!

Say your Web site shows hourly sales figures and a daily newsletter. Sales figures for previous hours are static, but the current hour's figures get updated every five minutes. To get the latest figures, users must hit the browser's refresh button. This refresh takes several seconds even though most of the page hasn't changed. With Ajax, you could put a document request on a five-minute timer, for example, and a server-side script page would recalculate the current hour's sales numbers. Only that hour's data is returned to the browser, so users don't have to hit "refresh" to update, and the Web server won't be bothered recalculating the same figures over and over. The only thing updated is the current hour's sales figures.

Tool Time

Your organization can start using Ajax right away--everything that's needed to develop Ajax Web sites is included in today's browsers. There also are a number of frameworks for using Ajax in Web site development, such as BEA's AquaLogic User Interaction.AquaLogic User Interaction includes a developer toolset, which BEA calls the scripting framework, a set of APIs to simplify building Ajax-based apps. BEA's tools split a Web page into "portlets," where each portlet has independent functions and can be connected to a different back-end system. One portlet could go to a CRM system and another portlet could be refreshed with documents related to an account selected from the CRM system.

BEA also uses Ajax in many of its Web apps, such as its AquaLogic Interaction Collaboration software, a document-sharing app. It's designed with a Outlook-like model with a left-hand pane and folders. Clicking on an item in the left-hand pane refreshes the right-hand pane only and also features right-click menus, another example of how you can use Ajax to create apps with desktop-like behavior.

Oracle has been developing Ajax frameworks since 1998, before Ajax even had a name. Oracle's Fusion middleware tools use a rich set of Ajax-enabled widgets called Oracle ADF Faces. These include splitters, sliders, dynamic graphs and bar charts. If you want to go with open source software, there are tools such as DOJO that include JavaScript, HTML and CSS files that in combination create a powerful Ajax API for creating interactive Web sites.

There are few techniques with the flexibility and capabilities of XMLHTTPRequest object, but there's at least one worth mentioning, W3C's HTML iframe. All major browsers support it. HTML iframe displays multiple pages within one page, so functionality can be split between iframe. An HTML table that's updated constantly can be put in its own iframe, for example, so it gets refreshed when a table is updated, but the rest of the page does not.

In reality, iframe can effectively be used to do the same things Ajax does. But making iframe behave like Ajax is a bit of a hack. Ajax is typically a better option because it's easier to create a standard set of JavaScript files (an API-like set of scripts) that can be reused.

Behavior Modification

When using Ajax, be aware the XMLHTTPRequest object behaves differently in different browsers. You should test your Ajax Web sites on all intended browsers and platforms. One potential problem: HTTP get requests for a given URL should always return the same HTML page. So various http headers may have to be modified--through the XMLHTTPRequest object's setRequestHeader(...) function--to ensure the get reply comes from the http server and not from browser cache.

And beware that using Ajax may make your HTML pages heavier. Initial page loads could place more stress on your servers and clients, so don't use Ajax for every aspect of your site, especially those where only a small percentage of the functionality gets used on a given visit.

Keep in mind, too, that Microsoft's implementation of the XMLHTTPRequest object in IE is an ActiveX object, and many enterprises disable ActiveX for security reasons.Ben Dupont is a systems engineer for WPS Resources in Green Bay, Wis. He specializes in software development. Write to him at [email protected].