Using Ajax for Creating Web Applications

In the past few years, developers could choose between two approaches when building a web application. The first approach was to create a screen-based system with very rich interactions using a sophisticated, powerful technology such as Java or Flash. The alternative approach was to create a page-based system using easier-to-learn core web standards like XHTML and CSS whose more basic capabilities force less-rich interactions. A new technological approach, dubbed Ajax, might just be the right mix between the two.

Screen-based Approaches: the Sophisticated Choice

Screen-based applications offer users the ability to enter and manipulate information on a small number of screens that instantly update with any submitted changes. Developers typically build these applications, which mimic the sophistication of desktop applications, with Java, Flash or a similar technology. The Broadmoor hotel reservation interface, the Gameday feature of MLB.com, and the Nike.com shoe configuration tool are some of the good examples of the screen-based approach.

Page-based Approaches: The Unsophisticated Choice

Developers who build page-based applications using standard web technologies are forced to deal with the load-reload effect of normal web pages. As a result, users who enter and manipulate information in page-based applications must sit through a page refresh in order for their changes to take place. The Amazon.com checkout sequence, Google search, and the eBay selling sequence are common examples of the page-based approach.

While both approaches have proven successful, each has drawbacks. Screen-based approaches, for example, require significant development time and effort because they are built with difficult to learn and often proprietary programming tools. While easier to build than their screen-based counterparts, page-based approaches provide a less seamless experience.

Ajax: A Middle-of-the-Road Approach

Ajax is a new web approach that marries the benefits of both screen and paged-based approaches. By allowing more sophisticated functionality using easier-to-implement web standards, Ajax is proving a real alternative for creating powerful web applications.

Jesse James Garrett of Adaptive Path coined the term “Ajax” in February of 2005, but the technology behind it is not new. Developers building Ajax interfaces leverage the same technologies as page-based approaches: XHTML, CSS, and JavaScript. So why is Ajax suddenly a popular topic? One reason is that several large companies including Google have created amazing applications using the technology: Google Maps, Google Gmail, and Google Suggest are all built using Ajax. Another reason is the continuing adoption of standards compliant-browsers that support Ajax technology, most notably Firefox, Safari, Opera, and Internet Explorer 6.

Freedom from the Page Refresh

Typically, when users enter information into an input field on a page-based web application, nothing is done with that information until they press “submit”. After they press “submit” the information is sent to the server, a response is returned, notifying the user of success or failure. During this time, which typically changes based on the speed of the connection and the amount of processing being done, the user sits and waits while the page refreshes. While we’ve found that the actual download time doesn’t lead to user frustration all by itself, we have seen that users desire (and expect) immediate response to their queries—reloading a page can result in user confusion. For example, users often find it difficult to recognize pages containing error messages, particularly if they can’t see the error messages without scrolling.

Ajax applications, on the other hand, don’t need to refresh the entire page to update information on it. Instead, Ajax apps can simply update parts of the page at any time, giving users an instantaneous response to their inputs and queries. This allows users to continually see what they’re working on and react to any changes, errors, or updates the interface notifies them of.

Instant Field Checking & Saving

One of the most beneficial features that we sometimes take for granted in desktop applications is the capability to instantaneously check the data we type in. In spreadsheet applications, for example, our name entered in a numeric field will instantly produce an error that we can fix immediately.

On the Web, it is easy to check fields on the client side using JavaScript. This produces an immediate effect, and mimics the behavior of a desktop application. However, for security reasons it is necessary to check all fields on the server end as well. Fortunately, Ajax allows that to happen, too.

Single Screen Interface

One of the biggest reasons to use the screen-based approach is the simplicity of a single-screen interface. In User Interface Engineering’s reports on Flash, we found that single screen interfaces proved very useful for people, providing several advantages over page-based applications.

One advantage of a single-screen is that users can see the big picture of the application, seeing all of the steps necessary to complete the application. This gives users a clear idea of what is expected of them during a transaction. On a page-based application, they might have to click through several pages without knowing what is ahead of them.

Single-screen interfaces also allow users to modify and change information in the order that they choose. If they want to add their billing information first, for example, they might be able to do that. Or, they might want to go back and change something that they already did. In a single-screen interface this is easy. On the other hand, most page-based approaches force users into a specific sequence.

Relatively Easy to Implement

Most of Ajax’s benefits mirror those of sophisticated screen-based applications. However, there is a big hurdle to creating these sophisticated applications: they are full-fledged programming environments that require advanced programming skills and a long-term commitment to proprietary technology. This makes creating interfaces in this way expensive and time-consuming.

Because Ajax applications are built using nothing more than current web standards, they are relatively easy to create. Most web designers familiar with building paged-based apps can migrate an interface to Ajax rather quickly. Also, enterprising Ajax developers have created easy-to-use building blocks that allow developers unfamiliar with the approach to migrate their applications over without having to write code from scratch.

Ajax: a Solid Alternative

By combining the sophistication of screen-based apps with the relative ease-of-implementation of paged-based apps, Ajax is a solid alternative for new interface development. Though nothing built with Ajax will be user-friendly out of the box, with care interfaces can take advantage of what we all know and love about desktop apps, while still feeling like we’re using the wonderful Web.