What Can You Do with Ajax?
There’s a great deal you can do with Ajax, and the following pages cover this
Create Ajax live searches
One of the most popular uses of Ajax is to create
, and you’ve already seen an example with Google Suggest at the beginning of this chapter. With a live search, the
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.
Enter a partial search term in Gollum, such as “Aja” for Ajax, and you can see the results in Figure 1.6, where Gollum has connected to Wikipedia behind the scenes and found matches to your partial search term. Those matches are displayed, as is usual for a live search, in a drop-down list, and you can select the one that you’re looking for. When you do, the matching Wikipedia article is opened in your browser.
Create an Ajax-enabled calculator
Any situation where you have to send data to the server and handle the data sent back to you behind the scenes is perfect for Ajax. So how about an Ajax-enabled calculator? You can find one at www.funwithjustin.com/ajax-toybox-demo/calculator.html, as shown in Figure 1.7.
To use the calculator, just enter two operands to work with, such as 5 and 7 in Figure 1.7, and click the operation you want to perform-addition, subtraction, multiplication, or division. Using Ajax, this Web page sends your operands to a program on the server that adds, subtracts, multiplies, or divides your
The results then appear in the bottom text field, as you can see in Figure 1.7, where 5 and 7 are added. And it’s all done without a page refresh-no browser flicker. This application, like other Ajax applications, looks just as if it’s a desktop application.
Talk with Ajax chat applications
Ajax is great
Using Ajax, however, you can update text anywhere in a page easily, no page refresh required. Take a look, for example, at www.phpfreechat.net/demo.en.php, the PHP Free Chat page. This page connects to a PHP script on the server to support a chat application. When you first navigate to PHP Free Chat, it asks you to enter a username, as you see in Figure 1.8.
After you’ve signed in, you can type your text in the text field that appears at the bottom of Figure 1.9; when you press Enter, that text is sent, using Ajax, to the server, which adds that text to the text that others have typed, and the results appear in the chat box, as you can see in Figure 1.9.
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
Crunch numbers with spreadsheets
More and more desktop-type applications are being
For example, take a look at Num Sum, a free online spreadsheet that works just as a desktop version would, at http://numsum.com/spreadsheet/new. You can see Num Sum at work in Figure 1.11.
Using Num Sum, you can create real spreadsheets, including the use of formulas, and save your data on the Num Sum server. Using this application is nearly indistinguishable from a desktop version, as you enter data and watch it being updated-all without a browser refresh.
Here’s a cute one: an application that lets you browse through the products for sale at Amazon.com. This application lets you display everything in Amazon.com using a clickable tree that is updated using Ajax. Just navigate to http://lmap.co.nr/Amazon1.htm and click a node to
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
You can see an autocomplete example at www.papermountain.org/demos/live/, which is shown in Figure 1.13.
Just type a partial English word in the text field as shown in Figure 1.13, and the application sends your partial word to the server, which finds matches to that word and sends back autocomplete suggestions. Those suggestions appear, as you see in Figure 1.13, and you can select among them. When you do, the term you select
You can find another autocomplete example available for download from SWATO, an Ajax toolkit, at
This example matches the
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.
If you enter an incorrect username and password, such as Steve and opensesame and click the page anywhere, you’ll see an error message, as shown in Figure 1.16.
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.
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.
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?
The end result is that you click a button and a new image appears, no browser refresh needed. That’s a combination of Ajax and dynamic HTML at work, and it indicates that you will indeed be able to download binary data using Ajax in this book.
Drag and drop with Ajax
As Web applications become more and more like desktop applications, more and more of what you take for granted in desktop applications is going to start showing up in online applications. For example, drag-and-drop operations can make life a lot easier for the user; and now, when you drag-and-drop items in a Web page, the server can be notified of what you’ve done behind the scenes. That means the
For example, take a look at the refrigerator
When you drag a “magnet” to a new location, that new location is sent to the server using Ajax techniques, and that location data is stored. Other people navigating to the page see the magnets in the locations you have set them, and when you come back to the page, the magnets will be where you placed them-unless someone has already moved them.
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.
Drag and drop doesn’t always have to do with individual items. For example, take a look at Ideo Technologies’ datagrid in Figure 1.22, which is located at http://sweetdev-ria.ideotechnologies.com/sweetdev-ria-demo-1.1-RC3/welcome.do. The datagrid control lets you rearrange
When you drag a column, the new column arrangement is sent to the server and stored, which means that when you navigate to other pages for the same datagrid (using the number links under the datagrid), that arrangement is preserved.
One of the biggest uses of dragging and dropping with Ajax is to implement shopping carts. Normally, when you want to add an item to a shopping cart online, you have to go through several pages: when you click the Add to Cart button, you then see a new page corresponding to the shopping cart, and then you must navigate backward to continue shopping.
Wouldn’t that be much easier if you never had to leave the page you were shopping on? What if you could simply drag an item to the shopping cart, and the server was notified behind the scenes of your purchase? No fuss, no muss.
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.
Online 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.
Getting information on the Netflix top 100 movies
All you’ve got to do to get more information on a movie is to let the mouse cursor rest on the name of the movie, and the application automatically downloads data from the server using Ajax and displays that data in a popup, as you see in the figure. That’s Ajax at work, once again: no page refresh needed, and no need to click the Back button in your browser to get back to the original display.