This is a basic tutorial on how to use the xmlHTTPRequest object to send an ajax request, the way I have chosen to do this is by calling the request encased in my own object.

First we need to create an object, and it shall be called ajaxRequest and it will have three arguments theURL, sendString, callbackFunction like so.

function ajaxRequest(theURL, sendString, callbackFunction)
{
}

Now we have our object container we are going to create three methods for the object called initiateRequest, processRequest, sendGetData, sendPostData.

A quick run down of the methods:
initiateRequest: Create the request object, depending on the browser.
processRequest: Processes the output of the function, depending on the status of all active documents.
sendGetData: Sends the request using the get method.
sendPostData: Sends the request using the post method.

So lets create the request object variable like so:

function ajaxRequest(theURL, sendString, callbackFunction)
{
var thisRequestObject;

thisRequestObject = initiateRequest();
thisRequestObject.onreadystatechange = processRequest;
}

The request object is assigned to the initiateRequest function, this function basically loads the correct object for the current browser.

function initiateRequest()
{
if (window.XMLHttpRequest)
return new XMLHttpRequest();
elseif (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
}

The onreadystatechange function is basically a function that is called everytime the ready state changes, this is so we can handle the output depending on the ready state, we will use processRequest to handle the statuses.

Now, this is what out processRequest function should look like.

function processRequest()
{
if (thisRequestObject.readyState == 4)
{
if (thisRequestObject.status == 200)
{
if (callbackFunction)
callbackFunction(thisRequestObject, sendString);
}
else
alert("There was an error: (" + thisRequestObject.status + ") " + thisRequestObject.statusText);
}

This function will basically check the ready state and when it 4 (ok) and the status is 200 (ok) then it will use the callback function we specified in the initial arguments, this is an optional function if you do not want to handle any data sent back.

You then need to create the post and get functions, both functions are identical apart from the fact that the post data specifies the Content-type of the data being posted, like so:

this.sendGetData = function()
{
if (theURL)
{
thisRequestObject.open("GET", theURL, true);
thisRequestObject.send(sendString);
}
}

this.sendPostData = function()
{
if (theURL)
{
thisRequestObject.open("POST", theURL, true);
thisRequestObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
thisRequestObject.send(sendString);
}
}

Now we have all the functions and methods required its time to test the script.

Create a test html file like so, to test the sending of the data (remember to include the javascript file for the request class):

and then create a php file, that I called php-file.php and then type anything you like in the php file.

Once you have the files in place, run the html file and then when the page loads you should have an alert box displaying the message you placed in your test file.

Thats how you send a request.

The Javascript:

<!--//

function ajaxRequest(theURL, sendString, callbackFunction)
{
var thisRequestObject;

thisRequestObject = initiateRequest();
thisRequestObject.onreadystatechange = processRequest;

function initiateRequest()
{
if (window.XMLHttpRequest)
return new XMLHttpRequest();
elseif (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
}

function processRequest()
{
if (thisRequestObject.readyState == 4)
{
if (thisRequestObject.status == 200)
{
if (callbackFunction)
callbackFunction(thisRequestObject, sendString);
}
else
alert("There was an error: (" + thisRequestObject.status + ") " + thisRequestObject.statusText);
}
}

this.sendGetData = function()
{
if (theURL)
{
thisRequestObject.open("GET", theURL, true);
thisRequestObject.send(sendString);
}
}

this.sendPostData = function()
{
if (theURL)
{
thisRequestObject.open("POST", theURL, true);
thisRequestObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
thisRequestObject.send(sendString);
}
}
}

//-->

HTML Inset Code

window.onload = function() {
var sendData = new ajaxRequest('./php-file.php', 'request=true', showReceived);
sendData.sendPostData();
}

 

function showReceived(returnData)
{
alert(returnData.responseText);
}

Good luck