JavaScript und XML – Verarbeitung von XML-Dateien

XML eignet sich hervorragend zur Übertragung von Datenstrukturen, die in ein HTML-Dokument eingebaut werden müssen. Aufgrund des strukturellen Aufbaus kann mit Hilfe von JavaScript und seinen DOM-Fähigkeiten leicht auf die in einem XML-Dokument enthaltenen Daten zugegriffen werden. Diese XML-Dateien können mit Ajax vom Webserver abgerufen werden.

Dabei ist es egal, ob die Daten als normale XML-Datei auf dem Server gespeichert sind oder per – beispielsweise in PHP geschriebenem – Script dynamisch auf Basis des Datenmaterials einer Datenbank erzeugt wird. Die auf diese Weise realisierbaren Web-Services können äußerst komplex sein und dennoch effektiv, da derart realisierte Services den Webserver erheblich entlasten können. So muss der Webserver nicht jedesmal die gesamte Seite ausliefern – die zu übertragenden Daten beschränken sich ausschliesslich auf den Teil, der in Form von Nutzdaten vom Web-Service erzeugt wird. Auch ist die Auslagerung durch Trennung des Web-Service vom eigentlichen Webserver sehr leicht realisierbar.

JavaScript XML Beispiel: XML-Dateien einbauen mit Ajax, JavaScript & XML

Das nun folgende Beispiel nutzt Ajax zur asynchronen Übertragung einer XML-Datei, die auf dem Webserver gespeichert ist und als Script unterhalb dieses Absatzes angezeigt wird. Nach der Übertragung der Nutzdaten, die in der Datei testdatei2.xml gespeichert sind, werden diese Daten, die im XML-Format vorliegen in das geöffnete HMTL-Dokument eingefügt. Diese Aufgabe übernimmt die Funktion mit dem Namen xml_daten_ausgeben.

<?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>

Zum Erzeugen von HTML-Elementen und Textknoten werden die Methoden createElement bzw. createTextNode genutzt. Auch zum Einhängen der XML-Daten in den HTML-Dokumentenbaum wird auf Methoden des JavaScript-Objekts Document zurückgegriffen. So hängt die Methode appendChild einen Knoten (Text- oder Elementknoten) an einen anderen. Im Beispiel wird per DOM eine Tabelle erzeugt, in welche die Daten des XML-Dokuments eingetragen werden. Der besseren Übersicht halber werden mit dem JavaScript Style-Objekt die CSS-Eigenschaften der Kopfzeile der Tabelle fett formatiert.

Die Methode getElementsByTagName liefert alle Elemente der in der Variablen response gespeicherten XML-Datensätze, die unter Tags mit dem Tag-Namen person gespeichert sind. Sie liefert ein Array mit den enthaltenen Datensätzen, die dann weiter verarbeitet werden. Mit der For-Schleife wird jeder einzelne Eintrag durchgegangen. GetAttribute entnimmt dem jeweiligen Datensatz die Attribute name und alter, während der Inhalt des Kindelements mit dem Namen info wiederum per getElementsByTagName ermittelt wird. Diese Daten werden dann in Form einzelner Tabellenzeilen in die Tabelle eingefügt. Am Ende der Funktion wird die so erzeugte Tabelle als Kindelement an das HTML-Element mit der ID ausgabeelement angehängt. Der dazu benötigte Verweis auf das Ausgabeelement – das SPAN-Tag zu Beginn des Quellcodes – wird durch die Methode getElementById() ermittelt.

<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>

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht