167 lines
5.0 KiB
JavaScript
167 lines
5.0 KiB
JavaScript
|
|
// holds an instance of XMLHttpRequest
|
||
|
|
var xmlHttp = createXmlHttpRequestObject();
|
||
|
|
// holds the remote server address
|
||
|
|
var valid_script = server + "validateajax.php";
|
||
|
|
// when set to true, display detailed error messages
|
||
|
|
var showErrors = true;
|
||
|
|
// initialize the validation requests cache
|
||
|
|
var cache = new Array();
|
||
|
|
|
||
|
|
// creates an XMLHttpRequest instance
|
||
|
|
function createXmlHttpRequestObject()
|
||
|
|
{
|
||
|
|
// will store the reference to the XMLHttpRequest object
|
||
|
|
var xmlHttp;
|
||
|
|
// this should work for all browsers except IE6 and older
|
||
|
|
try
|
||
|
|
{
|
||
|
|
// try to create XMLHttpRequest object
|
||
|
|
xmlHttp = new XMLHttpRequest();
|
||
|
|
}
|
||
|
|
catch(e)
|
||
|
|
{
|
||
|
|
// assume IE6 or older
|
||
|
|
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
|
||
|
|
"MSXML2.XMLHTTP.5.0",
|
||
|
|
"MSXML2.XMLHTTP.4.0",
|
||
|
|
"MSXML2.XMLHTTP.3.0",
|
||
|
|
"MSXML2.XMLHTTP",
|
||
|
|
"Microsoft.XMLHTTP");
|
||
|
|
// try every id until one works
|
||
|
|
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
|
||
|
|
{
|
||
|
|
try
|
||
|
|
{
|
||
|
|
// try to create XMLHttpRequest object
|
||
|
|
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
|
||
|
|
}
|
||
|
|
catch (e) {} // ignore potential error
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// return the created object or display an error message
|
||
|
|
if (!xmlHttp)
|
||
|
|
displayError("Error creating the XMLHttpRequest object.");
|
||
|
|
else
|
||
|
|
return xmlHttp;
|
||
|
|
}
|
||
|
|
|
||
|
|
// function that displays an error message
|
||
|
|
function displayError($message)
|
||
|
|
{
|
||
|
|
// ignore errors if showErrors is false
|
||
|
|
if (showErrors)
|
||
|
|
{
|
||
|
|
// turn error displaying Off
|
||
|
|
showErrors = false;
|
||
|
|
// display error message
|
||
|
|
|
||
|
|
alert("Error encountered: \n" + $message);
|
||
|
|
// retry validation after 10 seconds
|
||
|
|
setTimeout("validate();", 10000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// the function handles the validation for any form field
|
||
|
|
function validate(inputValue, fieldID, type)
|
||
|
|
{
|
||
|
|
// only continue if xmlHttp isn't void
|
||
|
|
if (xmlHttp)
|
||
|
|
{
|
||
|
|
// if we received non-null parameters, we add them to cache in the
|
||
|
|
// form of the query string to be sent to the server for validation
|
||
|
|
if (fieldID)
|
||
|
|
{
|
||
|
|
// encode values for safely adding them to an HTTP request query string
|
||
|
|
inputValue = encodeURIComponent(inputValue);
|
||
|
|
fieldID = encodeURIComponent(fieldID);
|
||
|
|
type = encodeURIComponent(type);
|
||
|
|
// add the values to the queue
|
||
|
|
cache.push("value=" + inputValue + "&fieldID=" + fieldID + "&type=" + type);
|
||
|
|
}
|
||
|
|
// try to connect to the server
|
||
|
|
try
|
||
|
|
{
|
||
|
|
// continue only if the XMLHttpRequest object isn't busy
|
||
|
|
// and the cache is not empty
|
||
|
|
if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
|
||
|
|
&& cache.length > 0)
|
||
|
|
{
|
||
|
|
// get a new set of parameters from the cache
|
||
|
|
var cacheEntry = cache.shift();
|
||
|
|
// make a server request to validate the extracted data
|
||
|
|
|
||
|
|
xmlHttp.open("POST", valid_script, true);
|
||
|
|
xmlHttp.setRequestHeader("Content-Type",
|
||
|
|
"application/x-www-form-urlencoded");
|
||
|
|
xmlHttp.onreadystatechange = handleRequestStateChange;
|
||
|
|
xmlHttp.send(cacheEntry);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e)
|
||
|
|
{
|
||
|
|
// display an error when failing to connect to the server
|
||
|
|
displayError(e.toString());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// function that handles the HTTP response
|
||
|
|
function handleRequestStateChange()
|
||
|
|
{
|
||
|
|
// when readyState is 4, we read the server response
|
||
|
|
if (xmlHttp.readyState == 4)
|
||
|
|
{
|
||
|
|
// continue only if HTTP status is "OK"
|
||
|
|
if (xmlHttp.status == 200)
|
||
|
|
{
|
||
|
|
try
|
||
|
|
{
|
||
|
|
// read the response from the server
|
||
|
|
readResponse();
|
||
|
|
}
|
||
|
|
catch(e)
|
||
|
|
|
||
|
|
{
|
||
|
|
// display error message
|
||
|
|
displayError(e.toString());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
// display error message
|
||
|
|
displayError(xmlHttp.statusText);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// read server's response
|
||
|
|
function readResponse()
|
||
|
|
{
|
||
|
|
// retrieve the server's response
|
||
|
|
var response = xmlHttp.responseText;
|
||
|
|
// server error?
|
||
|
|
//alert(response);
|
||
|
|
if (response.indexOf("ERRNO") >= 0
|
||
|
|
|| response.indexOf("error:") >= 0
|
||
|
|
|| response.length == 0)
|
||
|
|
throw(response.length == 0 ? "Server error." : response);
|
||
|
|
// get response in XML format (assume the response is valid XML)
|
||
|
|
responseXml = xmlHttp.responseXML;
|
||
|
|
// get the document element
|
||
|
|
xmlDoc = responseXml.documentElement;
|
||
|
|
result = xmlDoc.getElementsByTagName("result")[0].firstChild.data;
|
||
|
|
fieldID = xmlDoc.getElementsByTagName("fieldid")[0].firstChild.data;
|
||
|
|
// find the HTML element that displays the error
|
||
|
|
message = document.getElementById(fieldID);
|
||
|
|
// show the error or hide the error
|
||
|
|
message.className = (result == "0") ? "error" : "hidden";
|
||
|
|
// call validate() again, in case there are values left in the cache
|
||
|
|
setTimeout("validate();", 500);
|
||
|
|
}
|
||
|
|
|
||
|
|
// sets focus on the first field of the form
|
||
|
|
function setFocus()
|
||
|
|
{
|
||
|
|
document.getElementById("txtUsername").focus();
|
||
|
|
}
|