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
<html>
<head>
<title>HTMLfs</title>
</head>
<frameset rows=”100%,*”>
<frame name=”visible_frame” src=”visible.htm”>
<frame name=”hidden_frame” src=”hidden.htm”>
<noframes>Frames are required to use this Web site.</noframes>
</frameset>
</html>
Listing 2-2 visible.htm
<html>
<head>
<title>visible</title>
<script language=”javascript”>
/*
Perform page initialization.
*/
function initialize() { }
/*
Handle form visible form onchange events. Values from the visible
form are copied to the hidden form.
*/
function changeEvent(obj)
{
parent.frames[1].document.getElementById(obj.id).value = obj.value;
}
/*
Submits the form in the hidden frame then reloads the hidden frame.
*/
function submitForm() {
parent.frames[1].document.getElementById(‘hidden_form’).submit();
parent.frames[1].document.location = “hidden.htm”;
}
</script>
</head>
<body onload=”initialize()”>
<form name=”visible_form” id=”visible_form”></form>
</body>
</html>
Listing 2-3 hidden.htm
<html>
<head>
<title>hidden</title>
<script language=”javascript”>
var reBrowser = new RegExp(‘internet explorer’,’gi’);
/*
Perform page initialization, waits for the visible frame to load and
clones the hidden form to the visible form.
*/
function initialize()
{
var hiddenForm = document.getElementById(‘hidden_form’);
if(reBrowser.test(navigator.appName))
{
while(parent.document.frames.item(0).document.readyState !=
‘complete’) { }
parent.frames[0].document.getElementById(‘visible_form’).innerHTML =
hiddenForm.innerHTML;
}
else
{
var complete = false;
while(!complete)
{
try
{
parent.frames[0].document.getElementById(‘visible_form’).appendChild
(hiddenForm.cloneNode(true));
complete = true;
}
catch(e) { }
}
}
}
</script>
</head>
<body onload=”initialize()”>
<form name=”hidden_form” id=”hidden_form” action=”post.aspx”>
<h1>Address Information</h1>
<table border=”0” width=”100%”>
<tr>
<th width=”30%” align=”right”>Name: </th>
<td align=”left”>
<input type=”text” name=”name” id=”name” value=””
onchange=”changeEvent(this)”>
</td>
</tr>
<tr>
<th align=”right”>Address Line 1: </th>
<td align=”left”>
<input type=”text” name=”address1” id=”address1” value=””
onchange=”changeEvent(this)”>
</td>
</tr>
<tr>
<th align=”right”>Address Line 2: </th>
<td align=”left”>
<input type=”text” name=”address2” id=”address2” value=””
onchange=”changeEvent(this)”>
</td>
</tr>
<tr>
<th align=”right”>City: </th>
<td align=”left”>
<input type=”text” name=”city” id=”city” value=””
onchange=”changeEvent(this)”>
</td>
</tr>
<tr>
<th align=”right”>State: </th>
<td align=”left”>
<input type=”text” name=”state” id=”state” value=””
onchange=”changeEvent(this)”>
</td>
</tr>
<tr>
<th align=”right”>Zip Code: </th>
<td align=”left”>
<input type=”text” name=”zip” id=”zip” value=””
onchange=”changeEvent(this)”>
</td>
</tr>
</table>
<br>
<input type=”button” value=”Submit” onclick=”submitForm()”>
</form>
</body>
</html>