Java Reference
In-Depth Information
The HTML in the body of the page remains unchanged except for the addition of the <iframe/> tag
after the closing <form/> tag.
<iframe src=”about:blank” id=”hiddenFrame” name=”hiddenFrame” />
This frame is initialized to have a blank HTML page loaded. Its
name
and
id
attributes contain the
value of
hiddenFrame
. Use the value of the
name
attribute later to retrieve this frame from the
frames
collection in the BOM. Next, I set the CSS for the frame.
#hiddenFrame
{
display: none;
}
This rule contains one style declaration to hide the iframe from view.
Hiding an iframe through CSS enables you to easily show it if you need to debug the server-side
application.
Next up, the JavaScript.
function checkUsername()
{
var userValue = document.getElementById(“username”).value;
if (userValue == “”)
{
alert(“Please enter a user name to check!”);
return;
}
var url = “iframe_formvalidator.php?username=” + userValue;
frames[“hiddenFrame”].location = url;
}
The checkUsername() function has undergone a small change: It makes a request via the iframe
instead of using XMLHttpRequest. It starts by retrieving the value of the Username text box. It then
checks to see if the user typed anything into the box; if not, an alert box displays a message to the user
telling her to enter a user name. If the value isn't an empty string, then the function continues and con-
structs the request URL. The fi nal step is to load the URL into the hidden iframe by using the frames
collection and the location property.
The second function,
checkUsername_callBack()
, is also slightly changed. It now accepts two argu-
ments: the fi rst will contain either
available
or
not
available
, and the second will contain the user
name sent in the request.
function checkUsername_callBack(data, userValue)
{
if (data == “available”)
{
alert(“The username “ + userValue + “ is available!”);
}
else
{
