Ajax xml tutorial

Example

index.html

<!DOCTYPE html>
<html>
<body>
 
<h2>Ajax XML Example</h2>
 
<button type="button" onclick="loadXMLDoc()">Get Student Info</button>
<br><br>
<table id="test"></table>
 
<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      dataLoadFunction(this);
    }
  };
  xhttp.open("GET", "student.xml", true);
  xhttp.send();
}
function dataLoadFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Name</th><th>Class</th></tr>";
  var x = xmlDoc.getElementsByTagName("STUDENT");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("CLASS")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("test").innerHTML = table;
}
</script>
 
</body>
</html>

student.xml

<?xml version="1.0" encoding="UTF-8"?>
<STUDENT-INFO>
<STUDENT>
<NAME>Jai</NAME>
<CLASS>MCA FINAL</CLASS>
</STUDENT>
<STUDENT>
<NAME>Sachin</NAME>
<CLASS>MCA FINAL</CLASS>
</STUDENT>
<STUDENT>
<NAME>Naren</NAME>
<CLASS>MCA FINAL</CLASS>
</STUDENT>
<STUDENT>
<NAME>Vivek</NAME>
<CLASS>MCA FINAL</CLASS>
</STUDENT>
<STUDENT>
<NAME>Sahil</NAME>
<CLASS>MCA FINAL</CLASS>
</STUDENT>
</STUDENT-INFO>

Output

ajax example 1 - w3spoint
Click on Get Student Info button

ajax example 2 - w3spoint

Please Share