This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Real-World AJAX: Some Classic Examples
Ever since the term AJAX was coined, the concept has spread like wildfire in developer communities. Lots of applications have been developed using AJAX. In fact, a lot of applications were developed using AJAX long before AJAX came into existence. In this section, we will go over some AJAX application examples to give the reader some sense of what AJAX is capable of and what applications have been built using it.

AJAX Chat Applications
Chat applications represent an excellent AJAX experience not possible with the classic Web model. Chat requires asynchronous communication and cannot afford a “full-page refresh,” which is one of the reasons so many chat/IM applications have showed up since AJAX became popular.

Gabbly: Live Chat for Any Web Site
Gabbly is a new application that embeds a chat window in any Web page. The user sees the target Web site the way it is except for the added chat window. From the chat window, you can have a real-time chat with other users.

Gabbly uses IFrame to display the target Web site. Then in a separate IFrame, it displays the chat window. The chat window uses an XmlHttpRequest object to communicate chat messages with the server asynchronously. Figure 1.19 shows how Gabbly works with CNN.com.

Gabbly is a great Web 2.0 application that can add significant value to various Web sites. For instance, it could let all CNN.com readers interact with each other in real-time. Such real-time interaction between random Web visitors changes the Web from a static passive medium into an interactive social environment.

AJAX IM: The AJAX Instant Messenger

AJAX IM is an AJAX instant messaging client. It has a clean rich interface with multiple windows that feels like a normal desktop application.

AJAX+PHP CSS Popup Chat
AJAX+PHP CSS Popup Chat is another AJAX chat application that implements one-to-one chat using popup windows. It is written in PHP and MySQL and is free to be downloaded under the GPL license.

Meebo: Connecting All Popular IM Systems
Meebo is a Web-based instant messaging service that connects with all the major IM systems such as AOL, Yahoo, and MSN. A user can log in using his or her account from any of these IM systems, retrieve the buddy list, and chat with them.

Twelve weeks after its launch, Meebo had 236,000 successful logins, 6,534,948 messages sent, and approximately 13,069,896 total messages carried. By the end of 2005, Meebo averaged about 250,000 logins a day.

AJAX Office Applications
Office applications are another category of Web applications that were not possible before AJAX (AJAX being defined in the broad sense as DHTML and JavaScript). There are word processors, spreadsheets, slide shows, and so on.

AJAX Word Processors: Writely and AJAXWord
Writely (http://www.writely.com) is an AJAX-based word processor that Google recently acquired. Writely offers online document editing from a browser, sharing documents instantly with authorized users, collaborating with people, and storing documents securely online.

AJAXWord (http://www.AJAXword.com) is an open source word processor mimicking Microsoft Word’s look-and-feel, but written using JavaScript and DHTML. It features dedicated server-side file storage for each user, who uses a familiar file dialog to open or save files. When creating a new file, the user is prompted to select from a list of templates. Unlike other Web-based word processors, AJAXWord features a multiple windows interface (MDI) that enables a user to work on multiple documents at the same time.

AJAX Spreadsheet: NumSum
Numsum (http://numsum.com/) is a Web-based spreadsheet powered by DHTML and JavaScript for team collaboration and data sharing. It can work offline if it’s saved as a “Web page” on the local disk. You can create spreadsheets on-the-fly and name them if you want to keep and share them for a while, or just use one and move on.

Mashups
A mashup is a Web application that delivers an integrated experience by seamlessly assembling content from more than one source and displaying it in a unified user interface.

Mashup technology sounds like traditional “application integration.” Application integration developers have been assembling data from multiple sources and presenting it in one integrated application for years. The main difference between mashups and traditional application integration is where the “integration” takes place. Traditional application integration integrates data on the server side (“back-end integration”), which typically requires server-side programming skills (Java, C++, etc.) and access to enterprise server-side resources. Mashups typically do the integration at the browser layer without touching the server side at all (“front-end integration”), which only requires JavaScript and HTML coding skills, and data access is readily available from eBay, Amazon, Google, etc., via the public Internet. (http://www.programmableWeb.com/ lists close to 200 public APIs as of April 2006.)

AJAX (JavaScript and DHTML) is a major reason why mashups are so popular. Without the popularity and support of AJAX, it would have been difficult, if not impossible, to “integrate” data from multiple Web sites at the browser layer.

As blogs have revolutionized online publishing, mashups are revolutionizing Web development by letting anyone combine existing data from sources like eBay, Amazon, Google, Windows Live, and Yahoo in innovative ways. The greater availability of simple and lightweight APIs has made mashups relatively easy to design. They require minimal technical knowledge and, therefore, custom mashups are sometimes created by unlikely innovators, combining public data in new and creative ways. Today there are many mashups available on the Web. The http://www.programmableWeb. com/ site has tracked over 600 mashups as of April 2006, though a lot of them are simply “cute” and have no real value. The interesting trend to watch is what mashups will mean to the enterprise. Will they spur a “new” way of integrating enterprise applications? Will enterprises think of a “new” approach to “service orientation,” and, for example, make data available not only through SOAP but also though REST?

Mashup Example: HousingMaps
Almost as soon as Google published Google Maps, programmers started building mashup services on top of its infrastructure. HousingMaps (http://www.housingmaps.com) is one of the earliest and best known.

HousingMaps is a site that pulls real estate listings off the popular classified ad site Craigslist (http://www.craigslist.org), uses the addresses of the homes and apartments listed in a given neighborhood to figure out their latitudes and longitudes, and lets users view the properties on a Google map. Each listing is shown as a pushpin, and with a click on the pushpin a small window pops up with the price and sometimes a thumbnail image of the property. A list of the visible properties runs down the side of the screen, each linked to the original Craigslist posting. And because the results are filtered into price categories, users can easily steer clear of high-rent districts. HousingMaps has no affiliation with Craigslist or Google, but accesses both sites via public APIs.

Summary
AJAX has enabled a lot of interesting applications. We have talked here about traditional office productivity programs such as word processors and chat/IM. What is important but was not cited here are AJAX applications in an enterprise environment. There are many companies that are actively using AJAX for their business applications, dramatically enhancing the user experience and productivity.

AJAX also enables a new kind of application, so-called mashups that open up new possibilities of how applications can be built and how Web applications can be consumed. Combing data from multiple Web sites, mashups bring the user significant additional value. In the enterprise, mashups and the traditional integration approach go together as two complementary ways of enterprise integration.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.