Fresh: Nuts and bolts

XIV.5 September + October 2007
Page: 10
Digital Citation

What does AJAX mean for you?


Authors:
Daniel Zucker

We have all heard a lot about AJAX. But aside from being a four-letter acronym, what is AJAX, and what does AJAX mean to you, the UI designer? This article is intended to shed some light on AJAX at an introductory level.

AJAX stands for Asynchronous JavaScript and XML, but has come to represent much more than that. AJAX represents an entire new paradigm in Web design. Moving forward from the single-page paradigm of the Web, AJAX enables a design style that is more dynamic and more interactive, much more like a regular desktop application.

While AJAX is used primarily in Web design—indeed, this article focuses on the Web—it will open up new design possibilities beyond the Web. AJAX suggests a new design methodology for all desktop applications. Adobe has its AIR(tm) framework, Microsoft has its Silverlight framework, and Opera has its Opera Desktop. All three seek to bring this Web paradigm to the desktop, thus changing traditional application design. In all these examples, AJAX-style programming is used to build what were traditional desktop applications.

Where Does This Magic Come From?

The primary technological breakthrough that enabled AJAX is XmlHttpRequest (XHR), or XMLHTTP ActiveX object, an equivalent mechanism from Microsoft. JavaScript is of course essential, but this has already been with us for some time. XHR is a command that allows an application to request data using a script independently of when the user calls for a page refresh. Once the data is fetched, a JavaScript procedure can parse the data and update only the necessary part of the page that requires an update. Today there are many libraries to assist in the development of pages using AJAX, such as Yahoo! UI Library, Google Web Toolkit, or DoJo Toolkit, but in the end it all ultimately comes from XHR.

What Is AJAX Good For?

AJAX is great at solving two problems in traditional page-based Web design: buffering data before the user needs it, and improving user interactivity with the application interface. Google Maps is an example where the buffering problem is solved.

In previous map applications using the page-refresh paradigm, a map image is displayed as one page and then every subsequent pan, zoom, or similar interaction requires a new page with the requisite new data provided in one shot. What this means to the user is an annoying pause—click the button, wait several seconds as the full screen blinks and is refreshed. There is no smooth animation, no immediate response to the user as we have come to expect from a typical desktop application.

Google Maps breaks this download-refresh paradigm. Instead of refreshing the entire page, the user can grab the map and drag it as the data fluidly fills the frame: There is no annoying pause. The Google engineers have prefetched the data that lies just outside the border of the map in frame. When the map is dragged, the prefetched data comes into view with no refresh latency. The display does not blink as an entire page of data is reloaded. This is the Asynchronous in AJAX. The data is fetched asynchronously—at a different time—from the user’s request. The result is a smooth user interaction more like a desktop application, yet keeping several benefits of a Web application: no application needs to be downloaded and installed, no updates are needed (instead, the latest software version is always served from the server), and the user interface is the same across any machine regardless of operating system (OS), as long as the OS has an industry-standard Web browser.

Gmail is similar. Instead of prefetching data, Gmail focuses on AJAX to provide application interaction without requiring a refresh of the entire active display. For example, in the old paradigm, when a new email message arrives, an entire display of data (which could be hundreds of items) is pushed down and repainted on the screen. With AJAX, only the new message is updated. Only the local screen area that needs to be refreshed is updated.

Gmail is an example where AJAX is used to improve user interactivity. The Gmail application interface instead performs much more like a desktop application. New emails are automatically added to the inbox without requiring a full-page request (no flickering page refresh is visible; no need for the user to press the refresh button), while address fields that the user must fill are instead dynamically populated with hints from the user’s contact list. This improved interactivity is made possible because much more of the computation now happens in the Web browser, on the client device, than in the previous model.

Other AJAX Benefits

AJAX-style programming has other benefits beyond the buffering and improved user interactivity described above. Bandwidth requirements are typically less for a given application. This is because only the data that is needed is requested and transferred—refreshing the entire page with all data and graphics is not necessary. Another thing that works well with AJAX is queries that take a long time to run. Instead of pushing a submit button and causing the user to wait for a long time while the results are returned, with AJAX, the request for data can be made in the background while the user has continuous ability to interact with the page.

Additionally, dynamic data filtering works well with AJAX. Imagine a T-shirt ordering application in which T-shirts are available in different sizes, colors, and styles. However, depending on available inventory, not all combinations are available. As the user selects each attribute in turn, the options available should be filtered to return only the available items at that time. If each selection requires a page refresh, the user interaction becomes very slow and frustrating. However, with AJAX, the full data set can be downloaded, and the filtering of available options can be done in real time as the user makes progressive selections.

Finally, AJAX is good for form submissions. Feedback can be given to the user as the form is filled in. There is no need to wait until the form is finally submitted. For example, AJAX can be used to generate hints as a user fills in fields on a form.

What Are the Drawbacks of AJAX?

The primary annoyance with AJAX is that the browser’s “back” button (or equivalent scripting command) does not behave as expected with a traditional page-driven application. Since the AJAX application exists in a single page, pressing the back button takes the user to the previous page—which is completely outside of the given application. This can be very confusing to the user, since in the page-driven model, the back button takes the user to the previous step within the application. There are ways to mitigate this problem. For example, the script can artificially insert data into the history list so that when the back button is pressed, the application state is reverted to simulate the expected back behavior. This is what is done with Google Maps.

A similar problem exists with bookmarks. When bookmarking an AJAX page, the state of the given application is not bookmarked; only the address of that application is bookmarked. The user can attempt to bookmark a page that is several steps deep into an application flow, but when that user returns to the bookmark, he or she is placed at the starting point in the application. This can be very confusing. Again, there are some workarounds. When the bookmark is created, the script to add the bookmark can dynamically add a fragment to the URL to preserve some state information. Then when the user returns to this bookmark, the application state can be restored, placing the user in his or her expected place in the application.

The final drawback of AJAX is that it can actually cause degraded user performance if improperly implemented. The nature of AJAX is to shift the computing load from the server to the client computer. The optimum compute allocation, on the client or server, must be determined based on relative computing power. If too much burden is put on the client’s Web browser in processing long and complicated scripts, then the AJAX application can actually perform more slowly than the traditional page-based application.

What Does This Mean to You, the Application Designer?

Today AJAX is used primarily for Web-application design. Web pages are a common method for implementing UI and applications. Powerful graphics and interaction capabilities can be implemented in a way that’s accessible to a broad community of designers. AJAX has the additional benefits of enforcing good application design by separating data and its presentation.

As we are already seeing today, this paradigm will move from the Web to desktop applications. Likely this will appear first in embedded systems, where applications can be less complex and the ability to quickly create a graphically rich UI is desired. The entire device UI can be implemented in a Web-browser paradigm. For example, user interfaces for devices such as network routers are already typically implemented in a Web-browsing paradigm. Soon, these same devices will deploy a user-interface application that has the same look and feel of a desktop application, but is built on AJAX Web technology. Benefits include the ease to author, ease to upgrade, and rich graphics capabilities. Furthermore, it is easy to implement the same UI across a wide range of devices—the only requirement is to port the browser. With minimal study, an interaction designer familiar with Web technologies can not only use AJAX to build improved Web applications, but soon will also be able to build Web applications to drive the user interface for a desktop device.

If you haven’t done so already, check out AJAX and its capabilities. You may need to know more about it sooner than you think.

Author

Daniel F. Zucker
Zookware, LLC
zucker@stanfordalumni.org

About the Author

Dr. Daniel Zucker is an independent consultant specializing in the mobile Web. He is co-chair for the W3C SMIL Workgroup, and most recently was senior director of technology and FAE for ACCESS, a leading supplier of non-PC Web browsers. Prior to ACCESS, Zucker was VP of engineering for Mobilearia and CTO for ePocrates.

Figures

UF1Figure. Thanks to AJAX, Google Maps never makes users wait for a page to refresh (sequence above).

©2007 ACM  1072-5220/07/0900  $5.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2007 ACM, Inc.

 

Post Comment


No Comments Found