AJAX - XMLHttpRequest


AJAX - XMLHttpRequest

  • All latest browsers lend their support for the new built-in JavaScript XMLHttpRequest object (apart from IE5 and IE6, as they use an ActiveXObject).

Steps for using XMLHttpRequest :

  • Declare and initialize XMLHttpRequest object.xmlhttp=new XMLHttpRequest();
  • If using IE5 or IE6 browser, Declare and initialize an ActiveXObject.
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  • Open the request object to assign inputs.
xhttp.open("GET", "WikiTechy_Employee1_Details.txt", true);
  • Send the created request object to the web server:
xmlhttp.send(null);
  • Update the partial page with the response received from the web server.
document.getElementById("text").innerHTML=    xhttp.responseText;

XMLHttpRequest Open—Using False

  • The open method has third parameter value as “false”. This means that the XMLHttpRequest object must wait until the response is received from the server. Hence this becomes a synchronous task. This makes the website to slow its processing capabilities and hence not advisable to implement.

Example:

xhttp.open("GET", "WikiTechy_Employee1_Details.txt", false);
                  xhttp.send();

XMLHttpRequest Open—Using True

  • Change the third parameter in the open method to the value “true”. This means that the XMLHttpRequest object continues its other executions after sending the request to the server. Simple change the code as follows:

Example:

xhttp.open("GET", "WikiTechy_Employee1_Details.txt", true);
                  xhttp.send();

AJAX Sample Code :

<html>
<head>
    <script>
        function loadDoc( ) 
        {
            var xhttp = new XMLHttpRequest();
             xhttp.onreadystatechange = function() 
             {
                if (xhttp.readyState == 4 && xhttp.status == 200)
                {
                document.getElementById("text").innerHTML = xhttp.responseText;
            } };
            xhttp.open("GET", "WikiTechy_Employee1_Details.txt", true);
            xhttp.send();
        }
     </script>
</head>
<body> 
    <div id="text"><h2>WikiTechy - Welcomes you to learn Ajax</h2></div>
    <button type="button" onclick="loadDoc()"> Click to Load Data from File</button>
</body>
</html>
  • The file content of - WikiTechy_Employee1_Details.txt


Code Explanation :


    <script> HTML element to contain ajax code.

    Create a function with name “loadDoc()”.

    Declare a variable xhttp.

    Check for the browser type.

    Initialize the XMLHttpRequest object for browser other than IE5 and IE6 as xhttp = new XMLHttpRequest();.

    Initialize the XMLHttpRequest object for browser IE5 or IE6 as xhttp = new ActiveXObject("Microsoft.XMLHTTP");

    Capture the state change of the created object. This occurs when the server receives a request and sends its response.

    Check for the readyState and status property values. It should be equal to 4 and 200 respectively. This means that response from the server has been received completely.

    Assign the response text to a div element – text’s innerHTML attribute.

    Call the open() to send HTTP request to the server with ‘GET’  message type, text filename as input, along with explicitly setting asynchronous property to true. The “true” value indicates that this data transfer to and from server without disturbing any parallel task that is happening in the HTML code.

    Finally call the send() to send the request.

    End the <script> element to indicate the end of ajax code.

    Define a <div> element with name “text” and type a header text and add a button and in onclick() event call the ajax function loadDoc().

Output :


    The header text inside the <div> element is displayed.

    Click the button to call ajax function.


    Button click event is finished.

    Now the <div> element displays the text file content due to ajax request and response processes.