AJAX - Read Xml Data


AJAX - Read Xml Data

Sample code :

<html>
<head>
<script>
    function loadDoc( ) 
    {
        var xhttp, xmlDoc, txt, x, i;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function()
        {
            if (xhttp.readyState == 4 && xhttp.status == 200) 
            {
                xmlDoc = xhttp.responseXML;
                txt = "";
                x = xmlDoc.getElementsByTagName("NAME");
                for (i = 0; i < x.length; i++) 
                {
                txt = txt + "Employee "+ i + " Name is :" 
                                    + x[i].childNodes[0].nodeValue + "<br>";
                }
                document.getElementById("xmldata").innerHTML = txt;
             }
        };
        xhttp.open("GET", "EmployeeDetails.xml", 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>
    <p id="xmldata"></p>
</body>
</html>
  • The file content of - EmployeeDetails.xml


Code Explanation  :

    <script> HTML element to contain ajax code.

    Create a function with name “loadDoc()”.

    Declare the required variables.

    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 xml to a declared variable.

    Initialize the txt variable with empty string.


  Use the xmlhttprequest method getElementsByTagName method to read the content of the <NAME> element in XML file into the variable x.

    Now the variable x is a string array containing values of both NAME elements from the XML document.

    Assign the names one by one to the txt variable.

    Add <br> tag to create a separation between the names.

    Now assign the value of txt variable to the <p> element – xmldata’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.

    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().

    Create a <p> element with id as “xmldata” to bind the server response from ajax code.

Output :


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

    Click the button to call ajax function.


    Button click event is finished.

    Now the <p> element displays the xml file names due to ajax request and response processes.