AJAX XML Example
AJAX can be used for interactive communication with XML files.
AJAX XML Example
The following example will demonstrate how a web page uses AJAX to read information from an XML file:
Example Analysis - loadXMLDoc() Function
When the user clicks the "Get My CD Collection" button above, the loadXMLDoc() function is executed.
The loadXMLDoc() function creates an XMLHttpRequest object, adds a function to be executed when the server response is ready, and sends the request to the server.
When the server response is ready, an HTML table is constructed, nodes (elements) are extracted from the XML file, and finally the XML data is used to fill the table element with id="demo":
Asynchronously Load an XML Document
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (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;
}
AJAX Server Page
The server page used in the above example is actually a file named "cd_catalog.xml" XML file.
Other Extensions