Introducing Ajax | Page 3 | WebReference

Introducing Ajax | Page 3

'; figDoc.write(zhtm); figDoc.close(); } // modified 3.1.99 RWE v4.1 -->
[previous] [next]

Introducing Ajax

2.4 An Ajax Encounter of the First Kind

Now that I've gushed about the why of this technique, let me offer a little insight on the how of this technique. Let's start with the three HTML documents shown in Listing 2-1, Listing 2-2, and Listing 2-3. Some readers might not consider this a true example of Ajax, but it does share many of the same qualities of Ajax, in much the same way that a Star Trek fan and a Star Wars fan share many of the same qualities.

Listing 2-1 HTMLfs.htm

Listing 2-2 visible.htm

Listing 2-3 hidden.htm

2.4.1 A World Unseen

Any developer familiar with the use of frames and framesets will find Listing 2-1 pretty normal looking. However, one item isn't plain vanilla: the rows="100%,*" attribute on the frameset element, which states that the first frame gets 100 percent of available rows. The asterisk (*) states that anything left over goes to the second frame. In this example, there is nothing left over, so it is the equivalent of coding zero. This results in the first frame being visible and the second frame being hidden. In essence, this is a sneaky way to hide what's going on from prying eyes—namely, the user. The next two listings are the visible frame, Listing 2-2, and the hidden frame, Listing 2-3. Listing 2-3 is where the real mad science happens.

2.4.2 Enter JavaScript

Listing 2-2 is short and sweet, basically two short JavaScript functions that don't appear to do anything. The first of these functions, changeEvent, is just what it says it is, a handler for an on change event. When fired, it copies the value associated with the current object on the current frame to one with the same ID on the hidden frame. The second function, submitForm, submits a form; however, like the previous function, it works with the hidden frame by locating and submitting the form there.

This leaves just one question: Where does the HTML for the visible form come from? The answer lies in Listing 2-3, the one for the hidden frame. Like the visible frame, it has JavaScript functions and a form. There is, however, a major difference in the form. Unlike its visible counterpart, it has all of the HTML necessary to make a nice little form. The trick is getting it from the hidden frame to the visible frame.

This magic is accomplished in the pages' on load event handler, initialize. This function waits for the other frame to load and then copies this form's inner HTML to the other frame. When this is done, the result is the normal-looking web page shown in Figure 2-1. The way it behaves, however, is almost application-like, with parts of the visible page being updated each time the hidden frame does an unload/reload cycle.

Figure 2-1

Figure 2-1 A normal-looking web page that functions almost like a desktop application

Cover: Ajax: Creating Web Pages with Asynchronous JavaScript and XML

This excerpt is taken from Chapter 2 of Ajax: Creating Web Pages with Asynchronous JavaScript and XML, written by Ed Woychowsky, and published by Pearson Education, Inc., Copyright © 2007 Pearson Education, Inc. All rights reserved.

[previous] [next]