Introducing Ajax | Page 3
'; figDoc.write(zhtm); figDoc.close(); } // modified 3.1.99 RWE v4.1 -->
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.
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 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 A normal-looking web page that functions almost like a desktop application