AJAX-XML

Inhaltsverzeichnis

AJAX kann für die interaktive Kommunikation mit einer XML-Datei verwendet werden.

AJAX XML-Beispiel

Das folgende Beispiel zeigt, wie eine Webseite Informationen abrufen kann aus einer XML-Datei mit AJAX:

Beispiel

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
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;
}
</script>

</body>
</html>

Beispiel erklärt

Wenn ein Benutzer oben auf die Schaltfläche „CD-Info abrufen“ klickt, wird der loadDoc() Funktion wird ausgeführt.

Die Funktion loadDoc() erstellt ein XMLHttpRequest-Objekt und fügt die Funktion hinzu wird ausgeführt, wenn die Serverantwort bereit ist, und sendet die Anfrage an den Server.

Wenn die Serverantwort bereit ist, ein HTML Die Tabelle wird erstellt, Knoten (Elemente) werden aus der XML-Datei extrahiert und schließlich wird die Tabelle aktualisiert Element „demo“ mit der mit XML-Daten gefüllten HTML-Tabelle:

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: „https://basicit.org/js/cd_catalog.xml“.