XMLHttpRequest - HEART OF AJAX

Common XMLHttpRequest Object Properties

Common XMLHttpRequest Object Methods

XMLHttpRequest - what it actually does is simply provide a way for your client code (usually JavaScript in your Web page) to send an HTTP request.

Instead of a user request being made of the server via, for example, a normal HTTP POST or GET request, such as would be made by submitting a form or clicking a hyperlink, an Ajax script makes a request of a server by using the Javascript XMLHTTPRequest object.

Although this object may be unfamiliar to many, in fact it behaves like a fairly ordinary javascript object. As you may well know, when using a javascript image object we may dynamically change the URL of the image source without using a page refresh. XMLHTTPRequest retrieves information from the server in a similarly invisible manner.
There are two distinct methods for instantiating an XMLHttpRequest object. For Internet Explorer, an ActiveX object is used:
var req = new ActiveXObject(“Microsoft.XMLHTTP”);
For Mozilla and Safari, it's just a native object:\
var req = new XMLHttpRequest();
Instances of the XMLHttpRequest object in all supported environments share a concise, but powerful, list of methods and properties. Table 1 shows the methods supported by Safari 1.2, Mozilla, and Windows IE 5 or later.

Common XMLHttpRequest Object Methods have been shown above in the figure::

The open() and send() methods are the ones you'll likely use most. Two required parameters are the HTTP method you intend for the request and the URL for the connection. For the method parameter, use "GET" on operations that are primarily data retrieval requests; use "POST" on operations that send data to the server, especially if the length of the outgoing data is potentially greater than 512 bytes. The URL may be either a complete or relative URL.

An important optional third parameter is a Boolean value that controls whether the upcoming transaction should be handled asynchronously. The default behavior (true) is to act asynchronously, which means that script processing carries on immediately after the send() method is invoked, without waiting for a response. If you set this value to false, however, the script waits for the request to be sent and for a response to arrive from the server. While it might seem like a good idea to wait for a response before continuing processing, you run the risk of having your script hang if a network or server problem prevents completion of the transaction. It is safer to send asynchronously and design your code around the onreadystatechange event for the request object.

Common XMLHttpRequest Object Properties have been shown above

Once a request has been sent, scripts can look to several properties that all implementations have in common


The following generic function includes branched object creation, event handler assignment, and submission of a GET request. A single function argument is a string containing the desired URL. The function assumes that a global variable, req, receives the value returned from the object constructors. Using a global variable here allows the response values to be accessed freely inside other functions elsewhere on the page. Also assumed in this example is the existence of a processReqChange() function that will handle changes to the state of the request object.
var req;
function loadXMLDoc(url)
{
Req = false;
//check the browser’s compatibility with the XMLHttpRequest Object
if (window.XMLHttpRequest && !(window.ActiveXObject))
{
try
{
req = new XMLHttpRequest();
} catch(Exception e)
{
req = false;
}
}
elseif(window.ActiveXObject)
{
try
{
req = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(Exception e) {
try
{
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}
Catch(Exception e){
req = false;
}
}
}
if(req)
{
req.onreadystatechange = processReqChange;
req.open (“GET”, url, true);
req.send (“”);
}
The following listing shows a skeletal onreadystatechange event handler function that allows processing of the response content only if all conditions are right.
function processReqChange()
{
//only if the request made is completed
if (req.readyState == 4)
{
if(req.status == 200)
{
//processing statements go here
}
else
{
alert (“problem with retrieving the XML data”+ req.statusText);
}
}
}