The XMLHttpRequest object makes AJAX possible.

The XMLHttpRequest

The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.

Below is listed some of the methods and properties you have to become familiar with.

Creating An XMLHttpRequest Object

Different browsers use different methods to create an XMLHttpRequest object.

Internet Explorer uses an ActiveXObject.

Other browsers uses a built in JavaScript object called XMLHttpRequest.

Here is the simplest code you can use overcome this problem:

var XMLHttp=null
if (window.XMLHttpRequest)
  {
  XMLHttp=new XMLHttpRequest()
  }
else if (window.ActiveXObject)
  {
  XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }

Example above explained:

First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.

Then test if the object window.XMLHttpRequest is available. This object is available in newer versions of browsers like Firefox, Mozilla, and Opera.

If it's available, use it to create a new object:

XMLHttp=new XMLHttpRequest().

If it's not available,  test if an object window.ActiveXObject is available. This object is available in Internet Explorer version 5.5 and later.

If it is available, use it to create a new object:

XMLHttp=new ActiveXObject().

A Better Example?

Some programmers will prefer to use the newest and fastest version of the XMLHttpRequest object.

The example below tries to load Microsoft's the latest version "Msxml2.XMLHTTP", available in Internet Explorer 6, before it falls back to "Microsoft.XMLHTTP", available in Internet Explorer 5.5 and later.

var XMLHttp=null
try
{
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e)
 {
 try
 {
 XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
}

if (XMLHttp==null)
{
XMLHttp=new XMLHttpRequest()
}

Example above explained:

First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.

Then try to create the object the Microsoft way, available in Internet Explorer 6 and later:

XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")

If this catches an error, try the older (Internet Explorer 5.5) way:

XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

If  XMLHttp still has a null value, try to create the object the "standard" way:

XMLHttp=new XMLHttpRequest()

XMLHttpRequest Methods

The open() method.

The open() method sets up a request to a web server.

The send() method.

The send() method sends a request to the server.

The abort() method.

The abort() method aborts the current server request.

XMLHttpRequest readyState Property

The readyState property defines the current state of the XMLHttpRequest object.

Here are the possible values for the readyState propery:

readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.

readyState=1 after you have called the open() method, but before you have called send().

readyState=2 after you have called send().

readyState=3 after the browser has established a communication with the server, but before the server has completed the response.

readyState=4 after the request has been completed, and the response data have been completely received from the server.

Different browsers treat the ready state differently. Don't expect all browsers to report all states. Some will not report 0 and 1.

For Your AJAX applications you will actually only be interested state 4. That is when the request is completed and it is safe use the received data.

XMLHttpRequest responseText Property

The responseText property contains the text returned by the server.