Sending a Request
To send an HTTP request using the XMLHTTP object, we need to first call the open function with three parameters:
XmlHTTP.open(method, uri, async);
* method – this should be either ‘get’ or ‘post’. For a get request, data to be passed to the script is appended to the URI using a query string in the form: uri.php?var1=value1&var2=value2. For a post request, the data is passed to the script in the HTTP request body. We use the uriEncodeComponent function to url encode the data to be sent.
* uri – the path to the receiving script, relative to the current page (for reasons of security the open method will only open a document within the same domain as the current document).
* async – tells us whether the request should be asynchronous. When set to true, the request for the document is sent and script execution continues immediately. If set to false, the script waits until the response has been fully received. It is advisable in most cases to set this to true, as a slow server could cause the user interface to hang.
To send the request, we need to call the send function. Once a response is received, the responseText property will contain the text sent by the server side script in the HTTP response body. The location at which this property is available is dependent on whether the request was synchronous or asynchronous. With a synchronous request, the script waits for the response before continuing, therefore, the responseText property is available immediately after the the call to send. In contrast, the script does not wait for the response if the request was asynchronous. Instead, the XMLHTTP object fires the onreadystatechange event. Each time the event is fired, the readyState property of the XMLHTTP has changed. A readyState value of 4 signifies that the response has been fully received and the responseText property contains the HTTP response body.
Synchronous Request
xmlHTTP.open(‘get’, uri, false);
xmlHTTP.send(null);
alert(xmlHTTP.responseText);
Asynchronous Request
xmlHTTP.open(‘get’, uri, true);
xmlHTTP.onreadystatechange = function () {
if(xmlHTTP.readyState == 4) {
alert(xmlHTTP.responseText);
}
};
xmlHTTP.send(null);
A value of null is always supplied as the first argument to the send function in the case of a get request. In a post request, the data is sent in the body of the request–this is done by passing a url-encoded string to the send function instead of null.
Parsing the Response
In our email validation application, we will be using asynchronous requests and assigning a generic function to the onreadystatechange event. This function will parse the response, validate it and use the context supplied by the validation script to call the appropriate function to deal with the response.
Javascript:
function parseResponse()
{
if (xmlHTTP.readyState != 4) {
/* the request is not complete */
return;
}
var responseArray = xmlHTTP.responseText.split(‘;’);
var response = Array();
if (responseArray.length != 3) {
/* response is invalid */
return;
}
/* load the response into a logical associative array */
response[‘status’] = parseInt(responseArray[0]);
response[‘data’] = responseArray[1];
response[‘context’] = responseArray[2];
/* decide what to do based on the response context */
switch(response[‘context’]) {
case ‘validate’:
validateCallback(response);
break;
case ‘verify’:
verifyCallback(response);
break;
case ‘invalid’:
// return everything to its original state and start over
startupState();
validateAddress();
break;
case ‘unknownerror’:
// something is wrong – so we are going to fall back
btnSubmit.removeAttribute(‘disabled’);
txtEmail.onchange = null;
verify.style.display = ‘none’;
break;
}
}
This function will be called each time the readstatechange event is fired. Note that the Ajax part of the application is disabled if an unknown error occurs. This ensures that the user can still submit the form if email validation is not functioning. It is important to plan for failure in any application, but more so in Ajax applications. Users have become accustomed to submitting forms and presenting them with an unsubmittable form is likely to cause frustration as the user may not realize that any communication has been made with the server.
Validating the Email Address
Validating the email address is done in two parts. The validateAddress function is assigned to the onchange event handler of the email input box. This event is fired each time a change is made to the contents by the user. The validateAddress function performs the HTTP request and sends the appropriate information such as the email address and the ID in the query string.
Javascript:
function validateAddress()
{
var email = theForm.email.value;
var id = parseInt(theForm.email_id.value);
startupState();
if (email != ”) {
/* add the email address to the query string */
var dataString = ’email=’ + encodeURIComponent(email);
if (id > 0) {
/* if an ID is set, add that too */
dataString += ‘&id=’ + id;
}
} else {
/* no email entered, do nothing */
return;
}
/* send the request */
xmlHTTP.open(‘get’, emailValidate + ‘validate&’ + dataString, true);
xmlHTTP.onreadystatechange = parseResponse;
xmlHTTP.send(null);
}
function startupState()
{
verify.style.display = ‘none’;
verifyMsg.innerHTML = ”;
txtVerify.removeAttribute(‘disabled’);
btnVerify.removeAttribute(‘disabled’);
btnVerify.innerHTML = ‘Verify’;
btnSubmit.setAttribute(‘disabled’, ‘disabled’);
emailMsg.innerHTML = ”;
theForm.email_id.value = ”;
theForm.v_code.value = ”;
}
I mentioned earlier that we are using asynchronous requests. Therefore the second part of the email validation takes place when the response has been received from the server. The validateCallback function is called when the server responds with a ‘validate’ context. If validation was successful, the verification box is displayed.
Javascript:
function validateCallback(response)
{
if (response[‘status’]) {
/* the email address is valid and a verification email has been sent */
emailMsg.style.display = ‘none’;
verify.style.display = ‘inline’;
verifyMsg.innerHTML = ‘<b>An Email containing your verification code has been sent to this address. Please Enter it before continuing.</b>’;
theForm.email_id.value = response[‘data’];
} else {
/* the email address was invalid */
verify.style.display = ‘none’;
emailMsg.innerHTML = ‘<b>You have entered an invalid email address. Please correct it before continuing.</b>’;
emailMsg.style.display = ‘block’;
theForm.email.focus();
}
}
Download: email_validator.zip
