AJAX XML Example

AJAX can be used for interactive communication with an XML file.

AJAX XML Example

The following example will demonstrate how a web page can fetch information from an XML file with AJAX:

Example Explained

When a user clicks on the "Get CD info" button above, the loadDoc() function is executed.

The loadDoc() function creates an XMLHttpRequest object, adds the function to be executed when the server response is ready, and sends the request off to the server.

When the server response is ready, an HTML table is built, nodes (elements) are extracted from the XML file, and it finally updates the element "demo" with the HTML table filled with XML data:

Example

Example Code

javascript

Try it Yourself

function loadDoc() {

  const xhttp = new XMLHttpRequest();

  xhttp.onload = function() {myFunction(this);}

  xhttp.open("GET", "cd_catalog.xml");

  xhttp.send();

}

function myFunction(xml) {

  const xmlDoc = xml.responseXML;

  const x = xmlDoc.getElementsByTagName("CD");

  let table="  Artist  Title  ";

  for (let i = 0; i   " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
 +
    "  " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
 +
    "  ";
  }

 document.getElementById("demo").innerHTML = table;
}

The XML File

The XML file used in the example above looks like this: "cd_catalog.xml".

Interactive Code Examples

Example 2

javascript

Try it Yourself

JavaScript syntax and algorithm demonstration.

function loadDoc() {

  const xhttp = new XMLHttpRequest();

  xhttp.onload = function() {myFunction(this);}

  xhttp.open("GET", "cd_catalog.xml");

  xhttp.send();

}

function myFunction(xml) {
 
  const xmlDoc = xml.responseXML;

  const x = xmlDoc.getElementsByTagName("CD");

  let table="<tr><th>Artist</th><th>Title</th></tr>";

  for (let i = 0; i <x.length; 
 i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue 
 +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue 
 +
    "</td></tr>";
  }
  
 document.getElementById("demo").innerHTML = table;
}

Previous: AJAX - Server Response Next: AJAX PHP Example