First published by IBM developerWorks at http://www.ibm.com/developerWorks. Visit ibm.com/ developerWorks for more tutorials on open standard technologies, IBM products, and more.

Ajax and XML: Five cool Ajax widgets
Use Ajax and XML with new graphic tools to enhance your site

Level: Intermediate
Jack D Herrington (jherr@pobox.com), Senior Software Engineer, Leverage Software Inc.

16 Jan 2007
With the Web 2.0 wave came a whole new emphasis on the user experience. Part of that experience is the development novel ways to interact with and present information to users. Often, these new interfaces are called widgets and use Asynchronous JavaScript + XML (Ajax) to communicate with the server. Discover five widgets that you can use to enhance the interactivity of your site. The Web 2.0 revolution emphasizes unique and novel ways to interact with customers on your Web site. A lot of these new, innovative techniques revolve around using graphics and widgets that communicate with the server to retrieve data for display. In this article, I introduce you to five such
widgets — some open source, some licensed – that communicate with the server through Ajax and XML:

• carousel: This widget is a rolling image viewer that customers can use to scroll through a list of items, each portrayed by a small graphic. What you do when a user clicks an item is up to you. Examples of carousels in the wild include the Flikr site and the iTunes interface from Apple. This carousel is available at no cost and is based on the popular jQuery JavaScript framework.
  
• SWF/Charts: This Adobe Flash-based control reads XML located on the server for its charting data and styling options, then displays a chart based on the data. The interface is elegant, and the XML data is so easy to create that it’s a snap to add dynamic graphing to your page.
  
• SWF/Gauge: A cousin to SWF/Charts, this Flash widget uses XML located on the server to build a completely customizable gauge display. The gauge can look like something from an airplane or a car or something more trendy. The choice is up to you. In-place editing: While not strictly a widget, an in-place editing control is an intuitive, interactive, and lightweight way to get information from users when they have it. In-place editing functionality comes with the Scriptaculous framework, which sits on top of the prototype.js library.
  
• DHTML windows: The DHTML window provides a mechanism for putting a modeless floating window on top of your page content. Users can move the window around, resize it, or dismiss it. The content of the window can either be specified by JavaScript code on the page or read through Ajax from the server. This type of window is ideal for use as an alert mechanism or for bringing up small forms that don’t deserve an entire page reload.