AJAX- XML-Beispiel
AJAX kann für die interaktive Kommunikation mit einer XML-Datei verwendet werden.
AJAX-XML-Beispiel
Das folgende Beispiel zeigt, wie eine Webseite mit AJAX Informationen aus einer XML-Datei abrufen kann:
Beispiel
Beispiel erklärt
Wenn ein Benutzer oben auf die Schaltfläche "CD-Info abrufen" klickt, wird die loadDoc()
Funktion ausgeführt.
Die loadDoc()Funktion erstellt ein XMLHttpRequestObjekt, fügt die auszuführende Funktion hinzu, wenn die Serverantwort bereit ist, und sendet die Anforderung an den Server.
Wenn die Serverantwort fertig ist, wird eine HTML-Tabelle erstellt, Knoten (Elemente) aus der XML-Datei extrahiert und schließlich das Element „demo“ mit der mit XML-Daten gefüllten HTML-Tabelle aktualisiert:
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;
}
Die XML-Datei
Die im obigen Beispiel verwendete XML-Datei sieht folgendermaßen aus: " cd_catalog.xml ".