340
Kapitel 17: JavaScript und XML
Die Eigenschaft readyState
Vorherige Ausgaben dieses Buchs haben mithilfe der Eigenschaft readyState ermittelt, wann das XML-
Dokument geladen wurde. Die Eigenschaft readyState gibt mit fünf ganzzahligen Werten den aktuellen
Zustand der zu verarbeitenden Dokumentanforderung an. Tabelle 17.1 zeigt die Werte und entsprechen-
den Beschreibungen von readySta te.
Kapitel 19 geht näher auf die Eigenschaft readyState und das Ereignis onreadystatechange ein.
Um die Knoten und untergeordneten Knoten in einem XML-Dokument anzuzeigen, ist es erforderlich, die
Ebenen des Dokuments zu durchlaufen und das Ausgabedokument zu erstellen. Die nächste Funktion
realisiert dies, indem sie ein hierarchisches XML-Dokument durchläuft, um die Daten dieses Dokuments in
einer HTML-Tabelle anzuzeigen. Der Code ist die Fortsetzung des bereits gezeigten Beispiels, das die
Var iab l e xmlDocument erzeugt und mit einem XML-Dokument namens books.xml geladen hat:
function displayData(xmlDocument) {
var xmlEl = xmlDocument.getElementsByTagName("book");
var table = document.createElement("table");
table.border = "1";
var tbody = document.createElement("tbody");
// Den body-Abschnitt an die Tabelle anfügen
table.appendChild(tbody);
// Die Tabellenzellen für die neue Zeile erstellen
for (i = 0; i < xmlEl.length; i++) {
var row = document.createElement("tr");
// Die row/td-Elemente erstellen
for (j = 0; j < xmlEl[i].childNodes.length; j++) {
// Überpringen, wenn der Typ nicht 1 ist
if (xmlEl[i].childNodes[j].nodeType != 1) {
continue;
}
// Eigentliche text/data-Informationen aus dem XML-Dokument einfügen.
var td = document.createElement("td");
var xmlData =
document.createTextNode(xmlEl[i].childNodes[j].firstChild.nodeValue);
td.appendChild(xmlData);
row.appendChild(td);
}
tbody.appendChild(row);
}
document.getElementById("xmldata").appendChild(table);
}
Wert Beschreibung
0 Nicht initialisiert. Öffnen wurde noch nicht aufgerufen.
1 Geöffnet. Initialisiert, aber noch nicht gesendet.
2 Gesendet. Die Anforderung wurde gesendet.
3 Empfangend. Die Antwort wird aktiv empfangen.
4 Geladen. Die Antwort wurde vollständig empfangen.
Tabelle 17.1 Die Eigenschaft readyState
XML mit JavaScript verwenden
341
Um den gesamten Code in einer Webseite zu vereinen, ordnen Sie den Funktionen, die die XML-Datei
laden und anzeigen, ein Ereignis zu. Listing 17.1 (das in der Begleitdatei listing17-1.html enthalten ist)
erstellt eine neue Funktion getXML und verbindet sie mit dem load-Ereignis des window-Objekts. Der
Code, der das Ereignis verknüpft, ist fettgedruckt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
<html>
<head>
<title>Books</title>
<script type="text/javascript" src="ehandler.js"></script>
</head>
<body id="mainBody">
<div id="xmldata"></div>
<script type="text/javascript">
function displayData(xmlDocument) {
var xmlEl = xmlDocument.getElementsByTagName("book");
var table = document.createElement("table");
table.border = "1";
var tbody = document.createElement("tbody");
// Den body-Abschnitt an die Tabelle anfügen
table.appendChild(tbody);
// Tabellenzeile erstellen
for (i = 0; i < xmlEl.length; i++) {
var row = document.createElement("tr");
// Die row/td-Elemente erstellen
for (j = 0; j < xmlEl[i].childNodes.length; j++) {
// Überpringen, wenn der Typ nicht 1 ist
if (xmlEl[i].childNodes[j].nodeType != 1) {
continue;
}
// Eigentliche text/data-Informationen aus dem XML-Dokument einfügen.
var td = document.createElement("td");
var xmlData =
document.createTextNode(xmlEl[i].childNodes[j].firstChild.nodeValue);
td.appendChild(xmlData);
row.appendChild(td);
}
tbody.appendChild(row);
}
document.getElementById("xmldata").appendChild(table);
}
function getXML() {
if (window.XMLHttpRequest) {
var httpObj = new XMLHttpRequest();
} else {
var httpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
httpObj.open("GET","books.xml",false);
httpObj.send();
var xmlDocument = httpObj.responseXML;
displayData(xmlDocument);
}
342
Kapitel 17: JavaScript und XML
var mainBody = document.getElementById("mainBody");
EHandler.add(mainBody, "load", function() { getXML(); });
</script>
</body>
</html>
Listing 17.1 XML-Daten in einer HTML-Tabelle anzeigen
Öffnen Sie die Seite in einem Webbrowser. Die Tabelle zeigt die Daten in der Art eines Tabellenkalkula-
tionsprogramms an (siehe Abbildung 17.2).
Abbildung 17.2 Das Dokument books.xml
in einer HTML-Tabelle darstellen
Der Code in Listing 17.1 enthält eine große for-Schleife, die die XML-Hierarchie abarbeitet und dabei
Tabellenzeilen erstellt. Dabei sucht der folgende Code in der for-Schleife nur nach Element-Knoten im
XML-Dokument:
// Überspringen, wenn der Typ nicht 1 ist
if (xmlEl[i].childNodes[j].nodeType != 1) {
continue;
}
Der nodeType-Wert 1 repräsentiert einen XML-Element-Knoten. Ist der momentan in der Schleife unter-
suchte Knotentyp kein Element, geht der Code zum nächsten Teil des Dokuments über.
Möglicherweise haben Sie in der Anzeige gemäß Abbildung 17.2 bemerkt, dass es keine Spaltenüberschrif-
ten gibt. Um die Spaltenüberschriften hinzuzufügen, ist etwas zusätzlicher Code erforderlich. Die nächste
Prozedur zeigt, wie Sie das bewerkstelligen.
Spaltenüberschriften aus einem XML-Dokument hinzufügen
1. Bearbeiten Sie die Datei books.htm im Ordner der Begleitdateien von Kapitel 17 mit Visual Studio,
Eclipse oder einem anderen Editor. (Beim derzeitigen Stand der Prozedur sollte die in einem Webbrow-
ser angezeigte Seite books.htm wie in Abbildung 17.2 aussehen.)
2. Fügen Sie in books.htm den folgenden fettgedruckten Code in die Methode displayData() ein (in der
Begleitdatei books.txt enthalten), um den TODO-Kommentar zu ersetzen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/
strict.dtd">
<html>
Get JavaScript - Schritt für Schritt now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
