JavaScript XMLHttpRequest Object

XMLHttpRequest is one of the goals of AJAX technology. But what XMLHttpRequest actually is, where it comes from or how we can use it will be the content of this short post.

There are more definitions of the XMLHttpRequest. It depends on what side you are looking at from. From my side of view, the XMLHttpRequest Object is property of JavaScript Window Object.

As any other object, the XMLHttpRequest has its properties and methods. Here they are:

XMPHttpRequest PROPERTIES:

XMPHttpRequest METHODS:

We also can find an EVENT in the XMLHttpRequest:

Here is an example of XMLHttpRequest Object using:

function moveCalendar(month, year)
{
    var xmlHttp;
    // Create xmlHttp Object
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    }
    catch (e)
    {
        try
        {
            // Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    // Event Handler - EventListener
    xmlHttp.onreadystatechange = function()
    {
        if (xmlHttp.readyState == 4) // 4: The Request is complete
        {
            document.getElementById('calendar').innerHTML = xmlHttp.responseText; // Response
        }
    }
    // Request
    xmlHttp.open("GET", "/modules/mod_calendar.php?month="+month+"&year="+year, true);
    xmlHttp.send(null);
}

Stated above example tries to create an XMLHttpRequest Object. If successfull, a function is triggered by XMLHttp state change which reacts to the request represented by last two lines of the code. PHP script (calendar module in this case) expects a GET requests and returns the HTML code of the calendar portion (a month) specified by request (month and year). This returned code is then pushed into the page code by setting the HTML DOM property innerHTML to the value of XMLHttp response.

But what is this complicated manner good for? The main advantage is that by using XMLHttpRequest Object you don’t have to reload whole page when trying to retrieve some information. There’s just small part of page changed which result in very fast, dynamic effect of updating the data. Also, pushing a data to database is carried out much effective in case of XMLHttpRequest Object use.

Coding a script using XMLHttpRequest Object can be done manually (every action is coded separately) or you can use one of the frameworks which incorporates AJAX or offers nice interface to your existing PHP code. I personally, prefer the second type, so I use the xAJAX library where an XMLHttpRequest Object should be convenient. The goal of the xAJAX object is that you don’t have to change anything in your existing application source code. Just load the library, create object, register the function or class you want to handle by AJAX and that’s it!

Finally, there should be noted that from security reasons the XMLHttpRequest Object works within a domain only! It means that call of some location outside the domain leads to security error like this:

Error: uncaught exception: [Exception... "Access to restricted URI denied"
code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
location: "http://www.testfiles.loc/js/testfile.js Line: 43"]

I hope, this brief intro into the XMLHttpRequest Object gave you at least basic overview of the AJAX technology.

3 Responses to “JavaScript XMLHttpRequest Object”

1. David says:

   February 12, 2011 at 4:32 am

   This was very helpful. One question: What is the difference between “GET”, “POST”, and “HEAD”?

2. Arron says:

   July 1, 2012 at 5:33 pm

   Hi, I have query on this xmlHttpRequest.

   I have a rest webservice method which accepts a string parameter or XML object . How is it possible to send this string or XML object as parameter in XMLHttpRequest. Pelase help.

   Thanks

3. Manisha Khare says:

   January 10, 2013 at 12:24 pm

   Can we make connection for URL like http://some link.