CodesJava

Easy learning with example program codes

ajax xml example


Ajax refers to asynchronous java script and xml. It is not a not a programming language. Ajax is of Asynchronous type. It normally uses XML, plain text or JSON to communicate with server i.e. for data transfer.

Note: Ajax is technology independent.

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 - codesjava
Click on Get Student Info button

ajax example 2 - codesjava

Posted in Ajax   
Sign Up/ Sign In
Ask a Question


Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki