Remote Scripting with AJAX, Part 1
by Cameron Adams
|
As well as calling the server-side script, onchangeReceipt() also
assigns onreadystatechangeReceipt() to monitor the status of the
connection via the onreadystatechange event, and it is this function that determines
when the connection is finished and further action should be taken. To do this,
we use the previously discussed readyState/status condition
nesting:
function onreadystatechangeReceipt()
{
/* If XMLHR object has finished retrieving the data */
if (requester.readyState == 4)
{
/* If the data was retrieved successfully */
if (requester.status == 200)
{
writeDetails();
}
/* IE returns a status code of 0 on some occasions, so ignore this
case */
else if (requester.status != 0)
{
alert("There was an error while retrieving the URL: " + requester.statusText);
}
}
return true;
}
When a successful status code is returned, writeDetails() is
invoked. It is this function that parses the returned data and determines what
to do to the web page:
function writeDetails()
{
var receipt = document.getElementById("receipt");
if (requester.responseText.charAt(0) == "<")
{
var email = document.getElementById("email");
var name = document.getElementById("name");
receipt.valid = true;
email.value = requester.responseXML.getElementsByTagName("email")[0].
childNodes[0].nodeValue;
}
else
{
receipt.valid = false;
}
return true;
}
This function firstly checks the responseText property of the
XMLHttpRequest object, to see whether the receipt number was valid or not.
If it is valid, the data will be in XML format and its first character will
be an opening angled bracket (<); otherwise, it will be a plain
string. In each case, the extended property valid is set appropriately on the
receipt number field. Additionally, if the receipt number is valid, extra data
is added to the email field, having been parsed from the responseXML property
of the XMLHttpRequest object.
The execution of writeDetails() marks the end of the remote scripting
process for receipt number validation. With the extended valid property set
on the field, the browser knows whether or not the data is OK, and can alert
users of any errors when they try to submit the form:
orderForm.onsubmit = checkForm;
function checkForm()
{
if (!receipt.valid)
{
receipt.focus();
alert("Please enter a valid receipt number.");
return false;
}
...
If there is an error with the form, an alert() dialog appears
when the submit button is clicked, asking the user to correct the error before
the form is submitted:
Figure 2. Click for full-size image
checkForm() also handles the submission of the form data via
remote scripting (though, in reality, normal form submission would probably
suffice for an application like this). The remote scripting for the data submission
uses the same code we used for validation, but a different server-side script
is supplied to process the data, and instead of onreadystatechangeReceipt() being
called once the connection has finished, onreadystatechangeForm() is
called.
onreadystatechangeForm() triggers sentForm() to
re-write the web page and inform the user that the ecard was either successfully
or unsuccessfully sent, depending upon the data returned from the server:
function sentForm()
{
var body = document.getElementsByTagName("body")[0];
body.innerHTML = "<h4>Send someone an e-card from ExampleCo!</h4>";
if (formRequester.responseText == "success")
{
body.innerHTML += "<h4>Send someone an e-card from ExampleCo!</h4><p>Your
ExampleCo e-card has been sent!</p>";
}
else
{
body.innerHTML += "<p>There was an error while sending your
ExampleCo e-card.</p>";
}
return true;
}
This removes the initial form presented to the user, and inserts a final status
message:
Figure 3.
While this application rewrites almost the whole page, it's easy to see how
specific parts of the DOM could
be changed using remote scripting, which would enable separate parts of an
application interface to update independently of the web page itself.
Stay tuned for part two next week, where Cameron will cover how to create a usable scripting interface for the example application.
Prev [1] [2] [3]
