Ajax - Beginning JavaScript - page 459

return;
}
var url = "ch14_iframevalidator.php?email=" + emailValue;
frames["hiddenFrame"].location = url;
}
function handleResponse(responseText) {
var response = JSON.parse(responseText);
if (response.available) {
alert(response.searchTerm + " is available!");
} else {
alert("We're sorry, but " + response.searchTerm +
" is not available.");
}
}
document.getElementById("usernameAvailability")
.addEventListener("click", checkUsername);
document.getElementById("emailAvailability")
.addEventListener("click", checkEmail);
</script>
</body>
</html>
Save this file as ch14 _ example2.html , and save it in your web server's root directory. Also locate the
ch14 _ iframevalidator.php file from the code download and place it in the same directory.
Open your web browser and navigate to http://localhost/ch14_example2.html . You should see a
page similar to Example 1.
Check for three usernames and e‐mail addresses. After you clear the final alert box, click the
browser's Back button a few times. You'll notice that it is cycling through the information you
previously entered. The text in the text box will not change; however, the alert box will display the
names and e‐mails you entered. You can do the same thing with the Forward button.
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 . You use the value of the name attribute later to retrieve this frame from the
frames collection in the BOM. Next, you set the CSS for the frame:
#hiddenFrame {
display: none;
}
This rule contains one style declaration to hide the iframe from view.