Piecing Together The Code

Now we need to add some JavaScript to the page containing the form. We'll be adding this to the head section of the page, between script tags.

Firstly, let's add the function to instantiate the XMLHTTPRequest object:

function getXMLHTTPObject() {
try {
req = new XMLHttpRequest();
} catch(err1) {
  try {
  req = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {
      req = false;
    } 
  } 
}
return req;
}

We then need to create an instance http of the XMLHTTPRequest object:

var http = getXMLHTTPObject();

To send a request, we need a function to be called from the button on our page. The value that the visitor has entered in the 'uname' field is appended to the target URL as a variable 'name and value pair'. The escape() function is used to ensure that any special characters (such as spaces) are correctly encoded.  We use the random number technique described here to avoid problems with the browser cache:

var url = "checkuser.php?rand=";

function checkuser() {
var uname = document.myform.uname.value;

myRand=parseInt(Math.random()*999999);
http.open("GET", url + myRand + '&uname=' + escape(uname), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}

And finally, our callback function handleHTTPResponse() to deal with the data returned by the server. For the moment, this is an empty 'placeholder' function - we'll add the content to it later:

function handleHttpResponse() {
  if (http.readyState == 4) {
   
  }
}