TE RI AL Essential Ajax MA W TE D elcome 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. GH So what’s it all about? The central idea is making Web applications look and feel just like desktop applications.
Part I Fundamental Ajax 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.
Essential Ajax 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.
Part I Fundamental Ajax 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.
Essential Ajax FIGURE 1.5 The original Ajax article That gap is indeed closing, thanks to Ajax. So, according to the article, what does “Ajax” actually stand for? It stands for Asynchronous JavaScript and XML. As you can begin to see from its name, and as you can read in the Jesse James Garrett article, Ajax is really a collection of technologies.
Part I Fundamental Ajax In fact, XML is only one of the ways to handle data sent to you from the server. You can also send back plain text as well, and you’re going to see both techniques extensively in this book. Besides JavaScript and XML, Ajax also works with dynamic HTML and Cascading Style Sheets (CSS).
Essential Ajax There are plenty of live searches besides Google Suggest available online. For example, take a look at Gollum at http://gollum.easycp.de/en/, which is a live search of Wikipedia, the online free encyclopedia at www.wikipedia.org. Gollum is shown in Figure 1.6. FIGURE 1.6 Gollum performs live searches of Wikipedia. Enter a partial search term in Gollum, such as “Aja” for Ajax, and you can see the results in Figure 1.
Part I Fundamental Ajax FIGURE 1.7 An Ajax-enabled calculator Talk with Ajax chat applications Ajax is great anywhere intensive updating is required, such as chat applications, where any number of users can type and their text appears automatically to everyone currently logged in. Ajax is a good choice here because the text being displayed is always being updated, and having to watch it flicker as the whole page is updated would be very annoying.
Essential Ajax FIGURE 1.9 PHP Free Chat lets you enter text that others can see. There are many Ajax chat applications around. Take a look at www.plasticshore.com/ projects/chat/, for example, which is shown in Figure 1.10. To use this chat application, all you have to do is enter your name (or accept the default name) and your text, and click the Submit button. When you do, your text appears in the chat box, along with everyone else’s. FIGURE 1.
Part I Fundamental Ajax NOTE There are many more Ajax-enabled chat applications. For example, take a look at http://treehouse.ofb.net/chat/?lang=en for another good one. Crunch numbers with spreadsheets More and more desktop-type applications are being migrated to Web, thanks to Ajax. One of the latest is for spreadsheets, which you can now find in a number of places online. For example, take a look at Num Sum, a free online spreadsheet that works just as a desktop version would, at http://numsum.
Essential Ajax FIGURE 1.12 Browsing through Amazon.com Get the answer with Ajax autocomplete Ajax autocomplete applications are a lot like live searches. With live searches, you can enter a partial term in a text field. With autocomplete, however, there’s no search involved; autocomplete simply offers suggestions to complete the term you’re typing (if you do any cell phone text messaging, you’re probably familiar with the idea — many cell phones offer suggestions to complete a term as you’re typing it).
Part I Fundamental Ajax FIGURE 1.13 Using autocomplete FIGURE 1.
Essential Ajax Log in with Ajax Here’s another good one: rather than asking the users to navigate through a couple of pages to log in to a site, you can use Ajax to make the process easier, checking their typed username and password behind the scenes. For example, take a look at www.jamesdam.com/ajax_login/login.html, which is shown in Figure 1.15. This page lets you log in automatically using Ajax, no page refresh required. FIGURE 1.
Part I Fundamental Ajax FIGURE 1.16 The login is blocked. On the other hand, if you enter a correct username and password — user1 and pass1 works here — and click the page, you’ll see that you’re logged in, as shown in Figure 1.17. FIGURE 1.
Essential Ajax Download images You can download only text and XML using Ajax. Or can you? One of the examples you’re going to see in this book lets you use Ajax together with dynamic HTML to download images. This example is shown in Figure 1.18. FIGURE 1.18 In this example you can download images. When you click a button, this example downloads and displays an image, as shown in Figure 1.19. So is Ajax really downloading that image? Isn’t Ajax limited to downloading text and XML? FIGURE 1.
Part I Fundamental Ajax What really happens in this example is that Ajax downloads the name of the new image to display. Then, the example uses JavaScript to rewrite an HTML ![]()
element in the Web page, using the name of the file to download. When the browser sees that the ![]()
element has been rewritten, it downloads the image the ![]()
element references, through the magic of dynamic HTML. The end result is that you click a button and a new image appears, no browser refresh needed.
Essential Ajax Here’s another drag-and-drop example: the mosaic at thebroth.com. The idea here is that you and others can drag tiles to create a shared artwork, using Ajax. When you drag a tile, its new location is sent to the server using Ajax, and the tile’s position is updated everywhere, in everyone’s browser. You can find the mosaic at www.thebroth.com/mosaic, and it is shown in Figure 1.21. FIGURE 1.21 Creating a shared mosaic Drag and drop doesn’t always have to do with individual items.
Part I Fundamental Ajax FIGURE 1.22 Dragging a column in Ideo Technologies’ datagrid That’s the way it works with the shopping cart at www.puterpet.com/index.php?sel= crafted&menu=crafted&selection=rocks, which you can see in Figure 1.23. When you drag and drop an item to the Ajax-enabled shopping cart right in the page, the server is notified of your purchase, and the current total appears in the shopping cart, as shown in Figure 1.24. FIGURE 1.
Essential Ajax FIGURE 1.24 Adding an item to an Ajax-enabled shopping cart Play games with Ajax Here’s another fun use of Ajax: a Harry Potter–based “diary” that answers back what you type using Ajax. You can find this one at http://pandorabots.com/pandora/talk?botid= c96f911b3e35f9e1, as shown in Figure 1.25. FIGURE 1.
Part I Fundamental Ajax Try typing “Hello” in the diary. The word “Hello” appears momentarily, then disappears, followed by the diary’s response — fetched using Ajax — which you see in Figure 1.26. FIGURE 1.26 The diary responds. You can ask quite advanced questions of the diary, as shown in Figure 1.27, in which the diary is being asked where it is. FIGURE 1.
Essential Ajax And you can see the diary’s response in Figure 1.28. FIGURE 1.28 The diary indicates where it is. How about a game of Ajax-enabled chess? Take a look at www.JesperOlsen.Net/PChess/, which is shown in Figure 1.29. To move a piece, you have only to click it, then click its new position, and the piece is moved automatically. The game sends all the needed data to the server using Ajax, behind the scenes, and gets the data it needs back. Then it uses CSS to move its piece accordingly. FIGURE 1.
Part I Fundamental Ajax Modify Web pages on the fly One of the things that Ajax is big on is updating or modifying a Web page as the user watches. Because Ajax applications avoid complete page refreshes, along with the accompanying flicker and flash, you must update specific parts of a Web page in the browser. There are thousands of Ajax applications out there that operate this way, and you’re going to be creating some in this book as well. Here’s an example already online: http://openrico.org/rico/demos.
Essential Ajax FIGURE 1.31 Using an Ajax Rolodex This Rolodex works using CSS to display its data. Each time you click a person’s name, the application fetches that person’s data from the server, puts together a Rolodex card, and then displays that card using CSS to modify the Web page on the fly. That’s the way it works: You display the results of your actions in a Web page at run time. You don’t cause a page refresh to happen.
Part I Fundamental Ajax FIGURE 1.32 The Digg Spy application updates itself constantly. The SaneBull Market Monitor is another example that uses Ajax to refresh itself continuously. This page is located at www.sanebull.com and is shown in Figure 1.33. FIGURE 1.33 SaneBull constantly updates its stock ticker using Ajax.
Essential Ajax As you watch, the SaneBull monitor updates the Market Watch information at left in the Web page, giving you market quotes by modifying the Web page. Ajax applications sometimes work by updating HTML controls in the Web page, not just the display in the page itself. You can see an example at www.jsquery.com/java-jsquery/ examples/sql/zipform.jsp, which is a reverse ZIP code finder. You enter a ZIP code, and the application tells you what city and state the ZIP code is for.
Part I Fundamental Ajax FIGURE 1.35 Using the reverse ZIP code finder One of the all-time champs of Web page modification, and an application that no review of Ajax should omit, is Writely at http://docs.google.com. Writely is a complete online wordprocessing application of the kind made possible by Ajax, and you can see a sample from Writely’s Web site in Figure 1.36. FIGURE 1.
Essential Ajax Writely lets you create and edit documents just as if you were using it on a desktop, and it relies heavily on Ajax to avoid page refreshes as the user works on a document. Writely is another of those applications making the migration from the desktop to the Web. You’ve already seen an online spreadsheet application; now you’ve seen an online word processor — both usually desktop applications, now possible online.
Part I Fundamental Ajax FIGURE 1.38 Checking traffic conditions in the UK the Ajax way E-mail the Ajax way Another popular use of Ajax is supporting browser-based e-mail, and you can see an example at http://demo.nextapp.com/Email/app, shown in Figure 1.39. The problem with browser-based e-mail was that you’d see a list of e-mails sent to read, but each time you clicked an e-mail, you’d be taken to an entirely new page.
Essential Ajax FIGURE 1.39 Browser-supported e-mail FIGURE 1.
Part I Fundamental Ajax Ajax-enabled pop-ups O nline map applications aren’t the only ones using Ajax-enabled pop-ups; you can find them all over. For example, take a look at the Top 100 Netflix titles at www.netflix.com/Top100, shown in the following figure.
