 |
 |
 |
 |
|
|
|
Using XML: A PHP Developer's Primer, Part 2
Adam Delves
Verifying the Email Address
Verification follows a similar
pattern to validation. There is
verifyAddress function which is executed when the Verify button is
clicked and the verifiyCallback function which is executed when the
server responds with a context of 'verify'.
Javascript:
Javascript:
function verifyAddress()
{
var v_code = theForm.v_code.value;
var id = theForm.email_id.value;
if (v_code == '') {
/* no
verification code has been entered */
alert('No
Verification Code Entered');
theForm.v_code.focus();
return;
}
/*
add the verification code to the
query string */
var dataString = 'id=' +
encodeURIComponent(id) + '&v_code='
+
encodeURIComponent(v_code);
xmlHTTP.open('get', emailValidate +
'verify&' + dataString, true);
xmlHTTP.onreadystatechange
=
parseResponse;
xmlHTTP.send(null);
}
The verifyCallback function
checks for
successful verification. If
verification succeeded, the verify button's text is changed to
“verified”, disabled and the submit
button is enabled. It
also clears the email input box. This means that when the form is
submitted, only the email ID is passed to the receiving script and not
the email address. The email ID can then be used by the script which
processes the form data to check the address has been verified--if it
has, it need not be verified again.
Javascript:
Javascript:
function verifyCallback(response)
{
var v_code = theForm.v_code.value;
theForm.email_id.value =
response['data'];
if(response['status']) { // successful
verification
btnVerify.setAttribute('disabled', 'disabled');
txtVerify.setAttribute('disabled', 'disabled');
btnVerify.innerHTML =
'<i>Verified</i>';
verifyMsg.innerHTML = '';
/* enable
the submit button */
btnSubmit.removeAttribute('disabled');
verifyMsg.innerHTML = '<b><i>'
+
theForm.email.value + '</i></b>';
theForm.email.value = '';
} else {
verifyMsg.innerHTML = '<b>Verification
Failed</b>';
}
}
Putting it All Together
Congratulations, you now have a
working Ajax application which validates emails. You should have the
following four files in the same directory:
email_validate.php
email_validator.php
ajax_validation_engine.js
ajax_form.html
The three files required for this application are also included in the ZIP file.
email_validate.php
email_validator.php
ajax_validation_engine.js
ajax_form.html
The three files required for this application are also included in the ZIP file.
Extending this Example
To keep the application simple, we have omitted some details which would
be advisable to implement in a real world scenario:
- An extra box field should be included in the form to confirm the email address. Only when both email addresses match, should the Ajax engine send it to the server and validate.
- The email EmailValidator includes a remove method, which should be used by the script receiving the form data to remove the email address from the database once verification has been confirmed. This will prevent the database from growing to an unsavory size.
- We have not created the input.php script which receives the form data. If the email address was validated, it will not be sent to the input.php script--instead the email_id variable will be sent. The script can then use the email validator to check whether or not the email has been verified.
- By default, the EmailValidator creates the SQLite database in the same directory as the running script. For obvious security reasons, you should change the path of the database to one which is inaccessible by the web server.
Sites Which use Ajax
Below is a small taste of the many web sites with
applications which use Ajax. This list is likely only to grow. So be
one of the first web developers to jump on the Ajax bandwagon!
- Yahoo News - Hovering over the links to articles produces a small image and synopsis or the news item.
- Google Suggest - The text typed in the search box is buffered and sent to the Google server at regular intervals, producing a dropdown list of suggested searches.
- A9 - Amazon-based search engine which, in conjunction with XMLHTTP and IFRAMES, delivers an interfaces which responds instantly to user input, updating search results immediately.
- Google Mail - The Gmail application again uses a combination of IFRAMES and XMLHTTP to create a sleek responsive interface. Google also uses a pattern known as polling to regularly check the user's email.
| Comments: | ||
No Messages FoundYou can post questions/corrections/feedback here
| ||
|
If you are looking for help, please post on the appropriate forum here. Your questions will be answered much more quickly. | ||