Ajax: Auslesen und Verarbeitung von XML-Dateien

Inhalte von XML-Dateien einlesen und in HTML-Seiten ausgeben

Übersicht / Seite:

Content mit Ajax verarbeiten (eine kleine Einführung)
5.1 Verarbeitung von XML-Dateien (Attribute einlesen und ausgeben)
5.2 Mehrere Requests ausführen (Requests hintereinander abarbeiten)
5.3 Parallel Requests ausführen (Anfragen gleichzeitig senden)

Eine XML-Datei erstellen

Ein klein wenig aufwendiger wird die Angelegenheit, wenn an Stelle einer einfachen Textdatei eine XML-Datei eingelesen, verarbeitet und beim Aufruf im Browser innerhalb einer HTML-Seite ausgegeben werden soll. Wer jedoch bereits einige Erfahrungen mit dem Document Object Model (kurz DOM) machte, wird kaum mit größeren Problemen konfrontiert werden. Bevor eine XML-Datei angefordert und ausgelesen werden kann, muss zunächst einmal eine erstellt werden.
Als Beispiel soll eine wohlgeformte XML-Datei dienen, deren Werte sich nicht nur als Inhalt zwischen zwei Tags (Start- und Endtag) der jeweiligen Elemente befinden, sondern bei der einige Elemente zugeordnete Attribute mit Werten als Name-Werte-Paare enthalten.

Beispiel einer XML-Datei (datei.xml):

<?xml version="1.0" encoding="ISO-8859-1" ?>
  <Response>
    <Antwort>
      <titel>Die längsten Flüsse</titel>
      <Fluesse>
        <Fluss Name="Nil" Laenge="6.852"/>
        <Fluss Name="Amazonas" Laenge="6.448"/>
        <Fluss Name="Jangtsekiang" Laenge="6.380"/>
        <Fluss Name="Mississippi" Laenge="3.778"/>
        <Fluss Name="Jenissei" Laenge="5.540"/>
        <Fluss Name="Ob" Laenge="3.650"/>
        <Fluss Name="Amur" Laenge="2.824"/>
      </Fluesse>
    </Antwort>
  </Response>

Diese kleine XML-Datei sollte unter den Namen datei.xml abgespeichert werden und mit dem Script in einem gemeinsamen Verzeichnis abgelegt werden, anderenfalls ist der Pfad zur Datei im Code-Listing entsprechend anzupassen.

Ein- und auslesen der XML plus Verarbeitung

Das Einlesen einer XML-Datei erfolgt wie bei einer Textdatei, mit dem Unterschied, dass statt der Eigenschaft responseText die Eigenschaft responseXML verwendet wird. Durch diese Eigenschaft wird im Zusammenhang mit XMLHttpRequest ein neues "Object XMLDokument" erstellt, welches mit unterschiedlichen DOM-Methoden angesprochen werden kann.
Im Beispiel wird zuerst mit length die Anzahl der Elemente mit dem Tag-Namen "Fluss" gezählt, da dieser Wert für die For-Schleife benötigt wird. Anschließend wird mit der DOM-Methode getElementsByTagName das Element mit dem Tag-Namen "titel" angesprochen, wobei für den Zugriff auf den Inhalts des Elementes die Eigenschaften firstChild und nodeValue verwendet werden. Abschließend werden die Werte der Attribute mit den Methoden getElementsByTagName und getAttribute ausgelesen.
Es sei angemerkt, zwischen Methoden und Eigenschaften besteht eine gewisse Verwechslungsgefahr, so handelt es sich bei firstChild und nodeValue um Eigenschaften, ebenso wie bei der Eigenschaft attributes, die ebenfalls im Zusammenspiel mit nodeValue verwendet werden könnte, bei getAttribute hingegen um eine Methode.
Für eine abschließende Verarbeitung muss noch eine Ausgabe erfolgen. Diese Ausgabe der Daten wird erreicht, in dem die enthaltenen Werte mit der Methode getElementById und der Eigenschaft innerHTM innerhalb der gewünschten HTML-Tags ausgegeben werden.

Kleines Ajax-Beispiel:

<!DOCTYPE html>
<html>

<head>
<title>Verarbeitung von XML-Dateien mit Ajax</title>
<meta charset="windows-1252">
<style type="text/css">
body {background-color:#F1EDDA; color:#A88314}
div.ausg {text-align:center} 
#ausg-02 {text-align:left; margin-left:40%}
</style>
<script type="text/javascript">

var xmldata = null;
    xmldata = new XMLHttpRequest();

function xmlData() {

    if (xmldata.readyState == 4) {

        var inhalt = xmldata.responseXML;
        var ifluss = inhalt.getElementsByTagName("Fluss").length;
        var antwt1 = inhalt.getElementsByTagName("titel")[0].firstChild.nodeValue;

        document.getElementById("ausg-01").innerHTML = antwt1;

        for (var i = 0; i < ifluss; i++){

            var antwt2 = inhalt.getElementsByTagName("Fluss")[i].getAttribute("Name");
            var antwt3 = inhalt.getElementsByTagName("Fluss")[i].getAttribute("Laenge");

            document.getElementById("ausg-02").innerHTML += "<li>" + antwt2 + " - " + antwt3 + "</li>";
        }
    }
}

window.onload = function() {

    xmldata.open("GET", "datei.xml", true);
    xmldata.onreadystatechange = xmlData;
    xmldata.send(null);
}

</script>
</head>

<body>
<div class="ausg"> 
<h1>Verarbeitung von XML-Dateien</h1>
<h2 id="ausg-01"></h2>
<ul id="ausg-02"></ul>
</div>
</body>
</html>