XTech 2006 news

Newsletter sign-up


RSS and Atom feed icon News feeds

Hijax: Progressive Enhancement with Ajax

Jeremy Keith (Clearleft)
Ajax day St. John 2

Progressive enhancement is a widely accepted methodology in CSS circles. By applying a presentation layer on top of an existing markup structure, developers can rest assured that content will still be accessible, even if CSS is disabled.

This same thinking is now being applied to JavaScript. Using a technique called unobtrusive JavaScript, event handlers are taken out of the markup and applied in external JavaScript files. This creates a behaviour layer that, similar to the presentation layer, can be removed without preventing access to the core content. The JavaScript, like the CSS, degrades gracefully.

Progressive enhancement can also be applied to Ajax. Unfortunately, most Ajax applications are built without any thought for graceful degradation: no Ajax, no functionality. At best, a separate, dumbed-down version is provided but that increases development time and cost.

It sounds paradoxical, but the best way to build an Ajax application is to build an old-fashioned website that uses query strings and form data to transmit information to the server, which then returns an entire page. Then, using unobtrusive event handlers, intercept those links and form submissions and route them through the XMLHttpRequest object. The server can then return just a portion of the page instead of the whole page. This page fragment can then be inserted into the currently loaded page without the need for a page refresh.

By hijacking the regular functionality and replacing it with an enhanced Ajax version, you can be assured that your website will work with or without Ajax. In order for this technique - called Hijax - to work, your server-side architecture will need to be quite modular, capable of returning entire pages or just parts of pages. Building an API is one way of providing this modularity.

In the Hijax model, JavaScript isn’t used for advanced intensive processing. Instead, the XMLHttpRequest object acts like a dumb waiter, passing information backwards and forwards between the client and the server. This is the underlying principle behind the AHAH microformat. Instead of parsing XML (returned from the server in the ResponseXML property), simply dump pre-formatted markup (returned from the server in the ResponseText property) into a page element using innerHTML.

As long as your server-side architecture is flexible enough to accommodate partial as well as entire page responses, you can decide to apply Hijax later on in the development process:

Plan for Ajax from the start, Implement Ajax at the end.

Chair: Simon Willison