AJAX XML Voorbeeld

AJAX kan worden gebruikt voor interactieve communicatie met XML-bestanden.

AJAX XML Voorbeeld

Het volgende voorbeeld demonstreert hoe een webpagina informatie kan ophalen uit een XML-bestand via AJAX:

Voorbeeld

Probeer het zelf

Voorbeeldverklaring

Voer de functie loadDoc() uit wanneer de gebruiker op de knop 'CD-informatie ophalen' klikt.

De functie loadDoc() maakt een XMLHttpRequest-object, voegt een functie toe die wordt uitgevoerd wanneer de server gereed is om te reageren, en stuurt een verzoek naar de server.

Wanneer de server gereed is om te reageren, bouw een HTML-tabel, haal knopen (factoren) uit de XML-bestand, en update het element 'demo' uiteindelijk met een HTML-tabel gevuld met XML-gegevens:

LoadXMLDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
     }
  };
  xhttp.open("GET", "music_list.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artiest</th><th>Titel</th></tr>";
  var x = xmlDoc.getElementsByTagName("TRACK");
  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;
}

XML Bestand

De XML-bestand dat in het vorige voorbeeld wordt gebruikt, ziet er zo uit: "music_list.xml"。