• Choose a category
• All
• Classic-Fiction

The basicAJax.html program shown in Figure 1-1 illustrates AJAX at work.

Figure 1-1: Click the button and you’ll see some AJAX magic.

When the user clicks the link, the small pop-up shown in Figure 1-2 appears.

Figure 1-2: This text came from the server.

If you don’t get the joke, you need to go rent Monty Python and the Holy Grail. It’s part of the geek culture. Trust me. In fact, you should really own a copy.

It’s very easy to make JavaScript pop up a dialog box, but the interesting thing here is where that text comes from. The data is stored on a text file on the server. Without AJAX, you don’t have an easy way to get data from the server without reloading the entire page.

You might claim that HTML frames allow you to pull data from the server, but frames have been deprecated in XHTML because they cause a lot of other problems. You can use a frame to load data from the server, but you can’t do all the other cool things with frame-based data that you can with AJAX. Even if frames were allowed, AJAX is a much better solution most of the time.

You won’t be able to run this example straight from the CD-ROM. Like PHP, AJAX requires a server to work properly. If you want to run this program, put it in a subdirectory of your server and run it through localhost as you do for PHP programs.

This particular example uses a couple of shortcuts to make it easier to understand:

♦ The program isn’t fully asynchronous. The program pauses while it retrieves data. As a user, you probably won’t even notice this, but as you’ll see, this can have a serious drawback. But the synchronous approach is a bit simpler, so I start with this example and then extend it to make the asynchronous version.

♦ This example isn’t completely cross-browser-compatible. The AJAX technique I use in this program works fine for IE 7 and all versions of Firefox (and most other standards-compliant browsers). It does not work correctly in IE 6 and earlier. I recommend that you use jQuery or another library (described in Chapter 2 of this minibook) for cross-browser compatibility.

Look over the following code, and you’ll find it reasonable enough:

“-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Basic AJAX

Throughout this chapter, I explain exactly how to build an AJAX-enabled Web page by hand. It’s good to know how this works, but almost nobody does it this way in the real world. Read this chapter to get the basic understanding, but don’t worry if the details are a little foggy. The other chapters in this minibook describe a powerful library that greatly simplifies AJAX programming. Feel free to skip ahead if this chapter is too technical. Just come back when you’re ready.

Building the HTML form

You don’t absolutely need an HTML form for AJAX, but I have a simple one here. Note that the form is not attached to the server in any way.

This page is set up like a client-side (JavaScript) interaction. The form has an empty action element.