What Is Ajax?

What Is Ajax? The short answer is that it's a way to create interactive Web applications. All right, now what does that mean? Let's think about things that you might want to do with a Web site. For example, you might want to go out to dinner with your spouse. (If you don't have a spouse, feel free to substitute "friend," "relative," or "pet" for "spouse" in the previous sentence. Though most people don't go to dinner with their pets. But we digress.) So you want to know how to get from your place to that fabulous new restaurant downtown that everyone's told you about. You decide to look up directions on a Web site that provides maps. You go to the site, type in the restaurant's address, and the site shows you a map with the restaurant marked. This particular site shows you the map, with a border that you can click if you want to change the map view (Figure 1.3). You click a border, wait five to ten seconds or so for the map to redraw, and, if you want to change the view again, repeat. It's a slow process and not very responsive to you. Wouldn't it be better to just click the map and drag it in the direction you want, and the map view moves as you drag? Figure 1.3. This MapQuest map takes a long time to respond to user clicks, because it needs a lot of refreshing from the server to make changes. [View full size image] That's the kind of dynamic responsiveness you can provide to your users with a Web application built with Ajax (Figure 1.4). There's almost no waiting; the user is in control; and it allows you to create Web-based applications with the kind of user experience found on a traditional desktop application. Plus, it makes it a lot faster and easier to find out how to get from home to that great dinner. Figure 1.4. The Ajax-ified Google Maps allows a much more fluid and responsive user experience. [View full size image] Ajax is shorthand for Asynchronous JavaScript and XML, and it is a term that was first coined in early 2005 by Jesse James Garrett, a Web developer and author. Strictly speaking, Ajax is just a small (although particularly popular) part of JavaScript. As commonly used, though, the term no longer refers to a technology by itself (like, say, Java or JavaScript). In the larger scheme of things, what's generally referred to as Ajax is the combination of these technologies: XHTML CSS (Cascading Style Sheets) The DOM (Document Object Model) accessed using JavaScript XML, the format of the data being transferred between the server and the client XMLHttpRequest to retrieve data from the server Whew. That's quite a list, especially if you don't have much experience with JavaScript or other Web programming. But you shouldn't worry; throughout this book, we'll introduce each of these technologies. By the time you get to the Ajax chapters, the pieces that make it up should be old hat. The benefit to Ajax is that most of the processing for the application is happening within the user's browser, and requests to the server for data are usually short. So with Ajax, you can give users the kind of rich applications that depend on Web-based data, without the performance penalty of older approaches, which required that the server send back entire pages of HTML in response to user actions. Some companies have made huge investments in Ajax, notably Google, which has built several major Ajax applications, including Gmail (its Web-based email), Google Calendar, Google Suggest, and Google Maps. Another big supporter of Ajax is Yahoo!, which uses Ajax to enhance its personalized My Yahoo! portal, the Yahoo! front page, Yahoo! Mail, and more. Both companies have made interfaces to their Web applications public, so that people can use them to make interesting new applications. For example, many people have created mashups for Google Maps, which take a map and overlay interesting, useful, or just wacky information on the map, such as the location of all Japanese restaurants, or the filming locations for movies in the Los Angeles area. Tip For a nice listing of many Google Maps mashups, see Google Maps Mania (googlemapsmania.blogspot.com).