Chapter 1: Essential Ajax

In This Chapter

• Introducing Ajax

• Looking at Ajax in action

• Conducting Ajax Live Searches

• Using Ajax chat

• Enabling Autocomplete

• Dragging and dropping with Ajax

• Using Ajax-enabled shopping carts

Welcome to the Ajax Bible! This is the home of all things Ajax. Ajax is the new technology that’s blazing through the Internet, igniting Web sites everywhere. The Ajax revolution has come, and it’s changing the Internet. In fact, Ajax is the basis of what’s being called Web 2.0, the next version of the World Wide Web.

So what’s it all about? The central idea is making Web applications look and feel just like desktop applications. For example, take a look at Figure 1.1, where you see the familiar Google search page. Enter a term to search for, such as “Ajax,” and click the Google Search button.

Figure 1.1: Google searches for matches to the term you enter.

The screen flashes as it’s updated with new data, and the matches that Google found to your search term appear, as you see in Figure 1.2.

Figure 1.2: Google displays the matches it finds.

That works OK, but that’s not the Ajax way of doing things. Using Ajax, you can work behind the scenes, connecting to the server to get data without causing a page refresh in the browser. For example, take a look at the Google Suggest page at www.google.com/webhp?complete=1&hl=en, which is shown in Figure 1.3.

Figure 1.3: The Google Suggest page

As you type, the page in the browser actually connects to the Google server and looks up matches to the partial search term you entered. For example, type “aj,” and you’ll see a drop-down list box appear, as in Figure 1.4, with matches found by Google as you’re typing.

Figure 1.4: Google Suggest looks for matches as you type.

Behind the scenes, using Ajax techniques, the Web page connects to Google Suggest and searches for matches to your search term as you’re entering it. It then displays a drop-down list box of the matches it’s found to your search term, letting you select from those matches-all without a page refresh. That’s the crucial point: no page refresh was necessary. In the old days, when you wanted to send data to the server, you had to click a button, such as the Google Search button. Then you had to wait as the screen flickered and was refreshed. Now, a Web page can send data to the server without creating a page refresh at all, as you see in this example, where your search term was sent to the server automatically and the server sent back data to be displayed in the drop-down list.

No longer do you need to perform a page refresh when you send data to the server, or when you receive data from the server. Instead, Web pages can now act much more like desktop applications, sending data to the server and receiving data back, all behind the scenes.

This conversion of Web applications, making them feel more like desktop applications, is what’s meant by Web 2.0. How would you like it if your word processor flashed every time you typed a new character, and the entire document was displayed over again, with the cursor reset to the beginning of the document? Not a very attractive thought. Using Ajax, you can create online word processors that are practically indistinguishable from the desktop version-no flash, no flicker, no resetting the cursor location when you type. Just a smooth word-processing experience, just like the desktop version of the same application.

You can see why Ajax is causing a revolution in Web applications: now it’s possible to create online applications that look and feel just like their desktop counterparts.

This chapter gets you started. You’ll get an overview of the meaning of the term Ajax, and then a survey of how Ajax is used today. That survey is a very important part of this book because Ajax is turning up in more and more places-sometimes unexpectedly-and if you are familiar with the uses of Ajax, you’ll know where you can use it in your own Web applications.