Ajax Redux

Progressive Enhancement tutorial
Intro | Step 1 | Step 2 | Step 3

Perhaps by now you've been exposed to the notion that a rich client interface need not shut out people who have no rich client platform -- the notion of progressive enhancement. We've heard a lot of banter over whether it's okay to completely alter the user experience model so that it requires Javascript. And over whether "Ajax" should be an accepted term, since it specifically implies the use of XMLHttpRequest. I've even heard suggestions of how to best explain to your site's users that they need to either turn on Javascript or hit the road.

These questions don't matter if you build your app correctly. Translating a user interface into code shouldn't ever mean that you pick a toolset and write off everyone who doesn't share your tools. So here I provide a quick step-by-step overview of progressive Ajax enhancement as applied to a UI function. The function remains accessible to all web platforms, even the neglected ones like Lynx, browsers for the blind, Internet Explorer in heavy security mode, etc.

We'll build this simple form widget, which exposes the form when its link is clicked, submits the form asynchronously, and processes a response from the server:

It wouldn't be accurate to say that the user experience is identical in all browsers, of course, because not all browsers can do the same things. But the functionality is more important, and it's always available. Firefox, IE, Safari, IE Mac, Opera, and Netscape browsers should all provide the same experience for the form above. But then, XMLHttpRequest and ActiveX have known security flaws, so maybe folks have turned those off. In that case, the form will fail over to an iframe scripting model, which has slightly different behavior. Then there are the non-Javascript browsers, which must behave much differently, yet still allow the editing function. It's okay for the user not to get exactly the behavior you want, as long as the function is there.

In the next few pages we'll look at a way to build such a form in layers, each layer addressing more specialized functionality.

Step 1: The universal form >