Crash Course: Freshen Your Web Pages The AJAX Way

The emerging Asynchronous JavaScript and XML (AJAX) standard makes interactive Web pages seem more responsive by updating dynamic content without forcing a full-page refresh. We'll explain the ins and outs of AJAX, where to get it, and when -- or when not -- to use it.

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].

Editor's Choice
Sara Peters, Editor-in-Chief, InformationWeek / Network Computing
John Edwards, Technology Journalist & Author
Shane Snider, Senior Writer, InformationWeek
Sara Peters, Editor-in-Chief, InformationWeek / Network Computing
Brandon Taylor, Digital Editorial Program Manager
Jessica Davis, Senior Editor
John Edwards, Technology Journalist & Author