What the heck is AJAX?
AJAX stands for Asynchronous JavaScript and XML. First off it's not a new technology, it's an encapsulation of several technologies used together in a new way. As a general statement AJAX allow a web-page to pass information back to the server and update the page without the user having to navigating to a new page. There are plenty of sites that now describe the technical side for developers but I've found few resources for what how UI designers can incorporate AJAX enabled features in applications.
Current examples
- On Amazon.com – You have the ability to rate a movie with stars without leaving the page you are looking at
- On Google Maps – You have the ability to drag and zoom the map without having to browse to a new web-page
- On Flicker.com – you have the ability to organize your photos without browsing to a new page
- On NetFlix.com – You can view a photo and brief description for a movie without going to a new page.
What can AJAX do?
- It can modify the content of a page based on the click or action taken by the user. This includes mouse clicks, drags and keyboard actions
- It can update the content of a page periodically without the user taking any action or refreshing the page
- It can move objects on the page or hide objects dynamically based on data from the server
- It can dynamically load new functionality in addition to new content
- It can dynamically change CSS attributes
- It can pass any page specific data back to the server without any user consent
- Anything that JavaScript can do statically can be done asynchronously
Ways to use AJAX:
- Selection based data-binding - For example the user selects October 1st and you populate the room availability in a hotel.
- Data Completion - User types their zip code and you auto-fill in their state and city
- Data Normalization - User types in 14 inches and the data is normalized to 1' 2"
- Instant Data Validation - For example the user enters 55555555555 for their credit card and you can instantly tell that the credit card isn't valid. (Currently certain data validation can be done via JavaScript but other checks may require server specific checks)
- Instant Spellcheck - As you type and complete words the javascript can ask the server to validate the spelling and then set a CSS style to underline the text in red
- Virtualized scrolling - Google Maps shows an example of virtualized two dimensional scrolling but the same can be done in one dimension with large data sets. It's easier to scroll a long list then to click through 100 pages with 10 items per page. AJAX can allow you to fetch the data you need instead of preloading all of it.
- Web-based auto complete - As I type Mas... the page can suggest Massachusetts
- In place form submissions - Submit a form without navigation to a new page
- Dynamic Tool-tips - Ability to fetch and display rich tool-tips with images and data as you hover over elements
- Near Real Time Updates - The ability to dynamically update a page over time such as a stock ticker, auto-updating auction site without hitting refresh, chat application or collaboration tool
Guidelines
- Even though many things are possible you should be cautious not to overuse the technique. Many people are not familiar with dynamic interactions on the web and may not expect to interact with your site in any way other then clicking and navigating
- AJAX has the potential to cause problems when users expect to get back to a screen using the back button. If significant portions of the page change then users may expect to use the back button to return to the previous page of content. There are ways to handle this technically by using a hidden frame to create elements in the back stack.
- If you rely heavily on AJAX you may cause accessibility issues. Screen readers may have issues with content that appears dynamically. Consider providing alternate ways to view dynamic data and notifications in a traditional static way.
- Be aware that a small percentage of your web visitors browsers may not support AJAX.
AJAX makes it possible to do things that where previously only possible in a traditional desktop application. As AJAX evolves the gap between web applications and desktop applications will continue to shrink. Enjoy. Have fun.