Did you find this useful?
Socialize it today.


Ajax XMLHttpRequest Object

Saturday, July 21, 2012

The XMLHttpRequest object is the foundation that makes Ajax possible with the back-end communication between browser and web server. Fortunately, all modern browsers now support the XMLHttpRequest object. Without the support for this object, the browser would not be able to exchange data with the web server and update parts of the page without reloading the entire page. With Ajax, we can make GET and POST HTTP requests. However, there are some limitations to XMLHttpRequest object. These are mainly for security reasons. First, this object can only make HTTP(S) requests. References to File URLs are not supported. Secondly, the it can make requests only to the same domain as the currently loaded page. If XMLHttpRequest allowed requests to any web site, it could be used for malicious purposes.


Example

We will use the following HTML for the examples listed below.


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

  // ... JavaScript code

</script>
</head>
<body>
 <img id="img1" onclick="callFunction()" src="go.png" /> ; 
 <div id="div1"> <!-- Some Content --> </div>
</body>
</html>


Syntax

variable = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Safari, and Opera
variable = new ActiveXObject("MSXML2.XMLHTTP.6.0");
variable = new ActiveXObject("MSXML2.XMLHTTP.5.0");
variable = new ActiveXObject("MSXML2.XMLHTTP.4.0"); 
variable = new ActiveXObject("MSXML2.XMLHTTP.3.0");
variable = new ActiveXObject("MSXML2.XMLHTTP");
variable = new ActiveXObject("Microsoft.XMLHTTP");

To ensure that all browsers, including IE5 and IE6, will be supported, you first check if the browser supports the XMLHttpRequest object. If it does, then create an XMLHttpRequest object. If it does not, create an ActiveXObject. There have been several versions released with each subsequent release of the MSXML library. Each release brings with it better stability and speed, so you want to make sure you are always using the most recent version available on the user's machine. If you want to make sure that you are supported IE5, you will need to check against ActiveXObject("Microsoft.XMLHTTP"). It isn't necessary to check for each ActiveXObject version. If you are not interested in supporting IE5, but you do want to support IE6, you could check back to MSXML2.XMLHTTP.3.0.


XMLHTTPRequest Methods

MethodDescription
abort()Cancels the current request
getAllResponseHeaders()Returns header information
getResponseHeader()Returns specific header information
open(method,url)Specifies the method and URL (GET, POST, HEAD)
open(method,url,async)The async parameter specifies whether the request async or sync. True = async, async is default.
open(method,url,async,userName)Specifies the username to connect
open(method,url,async,userName,password)Specifies the password to connect
send(string)send(string) Sends the request off to the server.
setRequestHeader()Adds a label/value pair to the header to be sent


XMLHTTPRequest Properties

PropertyDescription
onreadystatechangeFunction to be called when the readyState property changes
readyStateHolds the status of the XMLHttpRequest. Values from 0 - 4
responseTextReturns the response data as a string
responseXMLReturns the response data as XML data
statusReturns the status-number. 200-OK, 404-Not Found
statusTextReturns the status-text: Ok, Not Found


    function loadAjax() {
        var xhr = false;
        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        } 
        else {
            // IE5-IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

Here is another method for creating the XMLHTTPRequest object. You would call the function and and check if the variable assigned is not NULL. If it is NULL, log the error or inform the user that the browser does not support the XMLHTTPRequest object. Using a try/catch block is good idea when using ActiveXOjbects because any failure to create an object will throw an error.


    function getXMLHttpRequest() 
    {
        if (window.XMLHttpRequest) {
            return new window.XMLHttpRequest;
        }
        else {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(ex) {
                return null;
            }
        }
    }

Here is a simple example which uses a combination of the recommendations provided so far. In this example, we attempt to create the native XMLHTTPRequest object. If we are not successful, we try to create the ActiveXObject. If that is not successful, we catch the error.

Example

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function loadAjax() {
    var xhr = false;
    if (window.XMLHttpRequest) {
        xhr = new window.XMLHttpRequest;
        }
        else {
              try {
                    xhr =  ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (ex) {
                    window.console.log("Ajax not supported.");
                }
            } 
        if (xhr) {
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("div1").innerHTML = xhr.responseText;
                }
            }
            xhr.open("GET", "demo_ajax_load.txt", true);
            xhr.send(null);
        }
    }
</script>
</head>
<body>
    <img id="img1" src="#" onclick="loadAjax()" />
    <div id="div1">Click the icon to load data via Ajax!</div> 
</body>
</html>

Here is another way to write the JavaScript code. This approach organizes the various portions of the Ajax code into distinct functions.

<script type="text/javascript">
    function loadAjax() {

        var xhr = getXHR();
        if (xhr != null) {
            xhr.open("GET", "/demo/ajax_load.txt", true);
            xhr.onreadystatechange = handler;
            xhr.send();
        }
        else {
            window.console.log("Ajax not supported.");
        }

        function getXHR() {
            if (window.XMLHttpRequest) {
                return new window.XMLHttpRequest;
            }
            else {
                try {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (ex) {
                    return null;
                }
            }
        }

        function handler() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    document.getElementById("div1").innerHTML = xhr.responseText;
                }
            }
        }
    }
</script>


click here
Click the icon to load data via Ajax!


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Ajax for Dummies The Complete Reference Ajax HTML CSS and JavaScript Editor