AJAX - Properties of XMLHttpRequest


AJAX - Properties of XMLHttpRequest

  • When a request is sent to a server a response is received. 
  • Based on the response an event is triggered by XMLHttpRequest by the way of its inherited properties from 
    • XMLHttpRequestEventTarget and of 
    • EventTarget.

Below follows a short note on them:

1. onreadystatechange

  • An event handler to trigger an action when the readyState attribute changes it state.

2. readyState

  • Determines XMLHttpRequest object’s state. Below are the list of its values:

Value

 State

Description

0

 UNSENT

The request object is just been declared.

1

 OPENED

The request has been initialized.

2

 HEADERS_RECEIVED

The request has been sent and its status is available.

3

 LOADING

The request is in process of receiving a response from the server.

4

 DONE

The response is received completely.









3. responseText

  • The response received from the server in text format.

4. responseXML

  • The response received from the server in XML format.

5. status

  • The current status of a sent request
    • 404 for "Response Not Found" 
    • 200 for "Response Found”

6. statusText

  • The current status in text format.

AJAX Sample Code  - Read Text Data :

<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 and initialize the XMLHttpRequest object.

    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.

    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.

    As you can see the full page refresh has not happened here. Instead the partial page, that is the <div> element alone is updated and it     means that things change without any effect on other elements of the page due to the implementation of ajax.