AJAX XML Voorbeeld
AJAX kan gebruik word vir interaktiewe kommunikasie met 'n XML-lêer.
AJAX XML Voorbeeld
Die volgende voorbeeld sal demonstreer hoe 'n webblad inligting van 'n XML-lêer met AJAX kan haal:
Voorbeeld
Voorbeeld Verduidelik
Wanneer 'n gebruiker op die "Kry CD-inligting"-knoppie hierbo klik, word die loadDoc()
funksie uitgevoer.
Die loadDoc()funksie skep 'n XMLHttpRequestobjek, voeg die funksie by wat uitgevoer moet word wanneer die bedienerantwoord gereed is, en stuur die versoek na die bediener.
Wanneer die bedienerrespons gereed is, word 'n HTML-tabel gebou, nodusse (elemente) word uit die XML-lêer onttrek, en dit werk uiteindelik die element "demo" op met die HTML-tabel gevul met XML-data:
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-lêer
Die XML-lêer wat in die voorbeeld hierbo gebruik word, lyk soos volg: " cd_catalog.xml ".