With the recent spread of AJAX (Asynchronous JavaScript) on the Web, designers are exploring different ways to use this technology. At the most basic level, AJAX allows the browser to have quick and small interactions with the server without reloading an entire page. Sometimes AJAX comes in the form of caching, or preloading information. This is seen in Google Maps when the user clicks and holds on the map. By mousing down and then moving the mouse, the user is able to drag different portions of the map into view. Rather than having to reload the entire page each time a new piece of map is shown, or precache the entire map of the world, AJAX allows the browser to download small squares of map as they are needed. The result is a seamless, flowing experience for the user. Very efficient.

One of the best uses of AJAX so far is the type ahead feature. Type ahead occurs when the user enters text into a field and the system displays fully formed guesses based on the letters the user has already entered. A classic example of this is in Microsoft Outlook when the user types in the "To" field as they compose a message. Outlook suggests email addresses based on the letters the user has already entered. This interaction places very little demand on the system because the list of email addresses Outlook has observed being used is relatively small. What happens when the list becomes enormous?

Lala, a terrific CD trading service, has an excellent example of type ahead in their search field. The user can enter any CD artist, album, or song name. The list of all possible artists, albums, or songs is far too long to precache for every browser hitting the homepage. Besides, fully caching the list would be an inefficient design that could lead to bogging down Lala's servers. Instead, Lala uses AJAX to quickly query the server and provide type ahead suggestions. There are no page reloads and very little lag time. It works beautifully.

Labels: ,

posted by Shawn Elson on Sunday, March 11, 2007



DIGG IT

Comments:

Post a Comment



Links to this post:

Create a Link