Enhance Your AJAX Applications with Visual Cues
- Challenges of the AJAX User Interface
- Processing Major Transactions
- Marking Changed Content
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Challenges of the AJAX User Interface
The traditional user interaction in classic web applications was well understood: You click, the browser freezes (apart from the rotating wheel on some edge of the window), and then the new content appears. AJAX technologies (particularly the background HTTP requests and the dynamic changes to HTML markup) enable completely different sets of user interfaces that aren’t yet common enough to be well understood by users. Therefore, it’s imperative that your AJAX application clearly indicates what’s going on, what has been changed, and when the user has to wait, giving the user the ability to cancel any ongoing action.
For example, when the user is editing photo captions in the online version of Google’s Picasa, the captions are saved in the background as soon as the user leaves the field. When the save process begins, that fact is clearly indicated by a status message next to the caption. Likewise, when the save process ends (successfully or not), the "saving" status is replaced by the end result.
In this article, you’ll learn how to implement several common visual cues, including the following:
- A modal dialog telling the user that a transaction is proceeding and that she should wait or cancel the transaction
- The text ... loading ... in small letters, placed close to the element that triggered a background request
- Background animation to indicate which part of the HTML markup has been changed as a result of a background web request
The JavaScript code throughout the article will take advantage of two libraries that I’m using in almost all projects: the Sarissa library to provide browser-independent access to background HTTP requests (via the XMLHttpRequest object) and the X library that provides the same service in the dynamic HTML environment. The Frequently Asked Questions example that we’ll use is described in my article "Introduction to HIJAX," and the JavaScript modal dialog box was introduced in my article "Build Modal Dialogs into your Web Application." The animated GIF images used in the examples were generated with Ajaxload.