JavaScript und XML – Verarbeitung von XML-Dateien

<?xml version="1.0" encoding="UTF-8" ?>
<personen>
  <person name="Wilhelm" alter="52">
    <info>Mann von Elisabet, Schwiegervater von Katarina und Vater von Karl!</info>
  </person>
  <person name="Karl" alter="34">
    <info>Verheiratet mit Katarina und Sohn von Wilhelm und Elisabet!</info>
  </person>
  <person name="Katarina" alter="32">
    <info>Frau von Karl, Schwiegertochter von Wilhelm und Elisabet!</info>
  </person>
  <person name="Elisabet" alter="62">
    <info>Ehefrau von Wilhelm, sowie Mutter von Karl und Schwiegermutter von Katarina!</info>
  </person>
</personen>

<span id="ausgabeelement"></span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Wenn es sich bei dem vom Benutzer verwendeten Browser
// um einen Internet Explorer handelt, wird das Request-Objekt
// per ActiveX geholt, oder ansonsten vom JavaScript Window-Objekt.
var httpRequestObject = (navigator.appName == "Microsoft Internet Explorer") ? 
      new ActiveXObject ("Microsoft.XMLHTTP") : new XMLHttpRequest ();
// Verbindung per GET öffnen und die XML-Datei abrufen.
httpRequestObject.open ('GET', 'testdatei2.xml');
// Event-Handler-Funktion handleReadyStateChange mit dem readystatechange-Event
// verbinden. Diese Funktion wird immer dann ausgeführt, wenn sich
// der Status der Abfrage ändert.
httpRequestObject.onreadystatechange = handleReadyStateChange;
// Als nächstes wird die Anfrage an den Server gesendet.
httpRequestObject.send (null);

// Event-Handler, der aufgerufen wird, wenn Statusänderungen beim Request-Objekt auftreten
function handleReadyStateChange () {
  // Request abgeschlossen (readyState 4) und Server mit OK (Status 200) geantwortet?
  // Bei allen anderen Statusänderungen wird die Funktion zwar aufgerufen, aber
  // es wird nicht auf die Stati reagiert.
  if (httpRequestObject.readyState == 4 && httpRequestObject.status == 200) {
    // Request ist abgeschlossen und alle Daten sind angekommen
    // => Empfangene XML-Daten im Ausgabeelement ausgeben
    xml_daten_ausgeben (httpRequestObject.responseXML);
  }
}

// Funktion zur formatierten Ausgabe der empfangenen Daten
function xml_daten_ausgeben (response) {
  // Neues HTML-Element vom Typ Table erzeugen
  var t = document.createElement ('table');
  // Tabellenzeile für die Spaltenüberschriften erzeugen
  var tr = document.createElement ('tr');
  // Überschriften Fett ausgeben
  tr.style.fontWeight = 'bold';
  // Spalten für die Tabellenüberschriften generieren
  var td = document.createElement ('td');
  // Textknoten mit der Überschrift in die Spalte einfügen
  td.appendChild (document.createTextNode ('Name'));
  // und das Spaltenelement in die Tabellenzeile einhängen.
  tr.appendChild (td);
  // Knoten klonen, Text darin ändern und den geklonten Knoten
  // einfügen (zweimal mit veränderter Überschrift).
  td = td.cloneNode (true);
  td.firstChild.nodeValue = 'Alter';
  tr.appendChild (td);
  td = td.cloneNode (true);
  td.firstChild.nodeValue = 'Info';
  tr.appendChild (td);
  // Tabellenzeile mit den Überschriften in Tabelle einhängen.
  t.appendChild (tr);

  // Elemente aus der XML-Datei ermitteln, die unter dem Tagnamen
  // person gespeichert sind.
  var personen = response.getElementsByTagName ('person');
  // Alle gefundenen Elemente nacheinander abarbeiten.
  for (var i = 0; i < personen.length; i++) {
    // Jedes gefundene Element in einer eigenen Tabellenzeile darstellen
    tr = document.createElement ('tr');
    td = td.cloneNode (true);
    // Attribut name des Datensatzes auslesen und in der ersten
    // Tabellenspalte ausgeben.
    td.firstChild.nodeValue = personen[i].getAttribute ('name');
    tr.appendChild (td);
    td = td.cloneNode (true);
    // In die zweite Spalte kommt das Attribut alter
    td.firstChild.nodeValue = personen[i].getAttribute ('alter');
    tr.appendChild (td);
    td = td.cloneNode (true);
    // Die dritte Spalte wird mit dem Inhalt des Kindelements info gefüllt.
    td.firstChild.nodeValue = personen[i].getElementsByTagName ('info')[0].firstChild.nodeValue;
    tr.appendChild (td);
    // Neue Tabellenzeile in die Tabelle einfügen.
    t.appendChild (tr);
  }
  // Tabelle als Kindelement an das SPAN-Element anhängen
  document.getElementById ('ausgabeelement').appendChild (t);
}
// -->
</script>