AJAX XML-voorbeeld
AJAX kan worden gebruikt voor interactieve communicatie met een XML-bestand.
AJAX XML-voorbeeld
Het volgende voorbeeld laat zien hoe een webpagina informatie kan ophalen uit een XML-bestand met AJAX:
Voorbeeld
Voorbeeld uitgelegd
Wanneer een gebruiker op de knop "Get CD info" hierboven klikt, wordt de loadDoc()
functie uitgevoerd.
De loadDoc()
functie maakt een XMLHttpRequest
object aan, voegt de functie toe die moet worden uitgevoerd wanneer het serverantwoord gereed is en stuurt het verzoek naar de server.
Wanneer de serverrespons gereed is, wordt een HTML-tabel gebouwd, worden knooppunten (elementen) uit het XML-bestand geëxtraheerd en wordt uiteindelijk het element "demo" bijgewerkt met de HTML-tabel gevuld met XML-gegevens:
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;
}
Het XML-bestand
Het XML-bestand dat in het bovenstaande voorbeeld wordt gebruikt, ziet er als volgt uit: " cd_catalog.xml ".