//The first function simply returns a browser specific XmlHttpRequest object. Unfortunately AJAX is supported slightly differently in IE than it is Safari, Opera and Mozilla-based browsers like Firefox. Microsoft Internet Explorer uses an Active X object while Mozilla and Safari use a native object.
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
 if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); //Mozilla, Safari ...
 } else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP"); //IE
 } else {
    //Display our error message
    alert("Your browser doesn't support the XmlHttpRequest object.");
 }
}

//The next step we will create our XmlHttpRequest object that we can use to make the requests.
//Our XmlHttpRequest object
var receiveReq = getXmlHttpRequestObject();

//After that we create a function that will make the AJAX request. This function gets two parameters: the url to send to the server and a parameter to the url with the content of the input field.
//Initiate the AJAX request
function makeRequest(url, param) {
//If our readystate is either not started or finished, initiate a new request
 if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
   //Set up the connection to captcha_test.html. True sets the request to asyncronous(default) 
   receiveReq.open("POST", url, true);
   //Set the function that will be called when the XmlHttpRequest objects state changes
   receiveReq.onreadystatechange = updatePage; 
   //Add HTTP headers to the request
   receiveReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   receiveReq.setRequestHeader("Content-length", param.length);
   receiveReq.setRequestHeader("Connection", "close");

   //Make the request
   receiveReq.send(param);
 }   
}

//At first we check if our XmlHttpRequest object is ready to make a request. If our readystate is either not started or finished then we initiate a new request. Next we open the connection to our server PHP page with the appended querystring and mark it as a "POST" request. After that we add HTTP headers to the request so that the server processes the request correctly. The next line defines the updatePage() function that will be called when we recieve the AJAX response. Finally, we actually send the request to the server.

//The updatePage() function executes every time the state of the XmlHttpRequest object changes.
//Called every time our XmlHttpRequest objects state changes
function updatePage() {
 //Check if our response is ready
 if (receiveReq.readyState == 4) {
   //Set the content of the DIV element with the response text
   document.getElementById('result').innerHTML = receiveReq.responseText;
   //Get a reference to CAPTCHA image
   img = document.getElementById('imgCaptcha'); 
   //Change the image
   img.src = 'create_image.php?' + Math.random();
 }
}

//At first we need to make sure our response is ready. If it is, then the content of the DIV element is filled with the response text and the CAPTCHA image is changed. One other thing you must remember you must have different names for each image. For that purpose we use the random() function.

//The last function will be called every time the form is submitted. It gets the value from the text box, sets the url and passes them as a parameters to makeRequest() function.
//Called every time when form is perfomed
function getParam(theForm) {
 //Set the URL
 var url = 'captcha.php';
 //Set up the parameters of our AJAX call
 var postStr = theForm.txtCaptcha.name + "=" + encodeURIComponent( theForm.txtCaptcha.value );
 //Call the function that initiate the AJAX request
 makeRequest(url, postStr);
}