TomRed.net

This tutorial is designed to outline the steps required to generate an AJAX XMLHttpRequest object, submit the request and handle the results of this transaction.  To begin with we must consider the type of AJAX object to consider as Internet Explorer does not recognise XMLHttpRequest and instead has and ActiveX object.  I have outlined a simple method for creating the AJAX object. I explain each step after the code.

function createAjaxObj(){
	if(typeof XMLHttpRequest != 'undefined'){
		return new XMLHttpRequest();

	}else if(typeof(window.ActiveXObject) != 'undefined'){
		var versions = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"];
		for (var i = verions.length -1; i >= 0; i--) {
			try{
				actXObj = new ActiveXObject(versions[i]);
				return actXObj;
			}catch(e){
				//incorrect XmlHttp type
			}
		}

	}else{
		try{
			typeof(window.createRequest() != 'undefined')
			return window.createRequest()
		}catch(E){
			throw new Error('AJAX is not supported');
		}
	}
}

//create the object
var ajaxObj = createAjaxObj(); 

There are 3 elements to this method, the first part of the IF statement is used to create and return a XMLHttpRequest object and will only occur when the browser is Mozilla or Safari based. If the browser is not one of these then the typeof operator will return 'undefined' and so it will not operate the IF and pass to the ELSE IF statement.
The second part of the IF statement is used to return the and ActiveXObject for Internet Explorer.  There is an list of versions which relate to Microsoft XML format.  This list is iterated until a type does not throw an error and then that object in returned.  If the ELSE IF is not pass then we move to the final element the ELSE statement.
This section is used for a third browser type (ICEBrowser) and as more browsers come on the market you can add a try/catch statement here to test which will work.  If all of these fail then we return an Error.

Before we move to the next section we must understand the states of the request, the methods and response.

States of the Requests

The XMLHttpRequest object can be in one of five states:

• UNSENT - a newly created request object is automatically in the unsent state. UNSENT is represented by 0
• OPENED - once the open() method is called the request object is in the OPENED state. It is during this state that you can set request headers using setRequestHeader(). Once in the opened state you can then use send() flag which can be set to either true or false. OPENED is represented by the 1
• HEADERS_RECEIVED - the request object enters this state when all response headers have been received. HEADERS_RECEIVED is represented by 2
• LOADING - the request object enters the loading state when the response is being received. LOADING is represented by 3
• DONE - the DONE state is achieved when the either the data transfer has completed or an error has occurred. This error can be accessed using the error flag. DONE is represented by 4

The current state is exposed through the readyState attribute.  The code example below shows how to access this readyState value.  We confirm that the state is 4 as we need to ensure the response has been received.

ajaxObj.processRequest = function() {
	if (this.readyState == 4) {
		//do request processing here
	}
}