O'Reilly logo

JavaScript - Schritt für Schritt by Steve Suehring

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

371
Kapitel 20
AJAX für Fortgeschrittene
In diesem Kapitel:
Eine HTML-Tabelle mit XML und CSS erstellen 372
Die Tabelle mit CSS formatieren 375
Ein dynamisches Dropdownfeld erzeugen 378
Benutzereingaben und AJAX 383
Übungen 383
372
Kapitel 20: AJAX für Fortgeschrittene
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
AJAX und CSS gemeinsam zu verwenden
tiefer in die Beziehungen zwischen DOM, AJAX und CSS einzudringen
AJAX und CSS zu verwenden, um eine HTML-Tabelle mit XML-Daten zu erstellen und zu formatieren
ein AJAX-basiertes Dropdown-Textfeld mithilfe von CSS zu erstellen
Das vorhergehende Kapitel hat gezeigt, wie Sie Anforderungen mithilfe des XMLHttpRequest-Objekts
senden, empfangen und verarbeiten und wie Sie schließlich eine AJAX-Anwendung erstellen. In diesem
Kapitel lernen Sie, wie Sie CSS einsetzen, um die mit AJAX abgerufenen Daten anzuzeigen.
Kapitel 15 hat sich mit der Beziehung zwischen JavaScript und CSS beschäftigt und erläutert, wie Sie Do-
kumentformate per JavaScript programmgesteuert ändern können. In Kapitel 17 haben Sie gelernt, wie Sie
XML-Daten als HTML-Tabelle anzeigen. Und in Kapitel 19 ging es darum, eine live durchsuchbare Lese-
zeichen-Webseite mithilfe von etwas CSS und jeder Menge DOM zu erstellen. Dieses Kapitel zeigt nun, wie
Sie mithilfe von CSS die Tabelle aus Kapitel 17 formatieren. Außerdem überarbeiten Sie erneut die Lesezei-
chen-Anwendung aus Kapitel 19, um sie mithilfe von CSS und JavaScript zu erweitern und aufzurüsten.
Nebenbei möchte ich vermitteln, dass AJAX wirklich recht einfach zu verwenden ist. Der einfachste Teil ist
es, die Informationen mit XMLHttpRequest abzurufen und zu parsen – was wirklich zählt, ist, was Sie mit
diesen Daten anstellen. Deshalb sind CSS und das DOM wichtig! Mit AJAX vereinen Sie das gesamte
JavaScript, was Sie in diesem Buch gelernt haben, um größere Anwendungen zu erstellen.
Eine HTML-Tabelle mit XML und CSS erstellen
Das in Kapitel 17 vorgestellte Beispiel hat XML abgerufen und dessen Daten als Teil einer HTML-Tabelle
verwendet. Der Code zum Erstellen dieser Tabelle wurde in Kapitel 17 entwickelt und erweitert, um nicht
nur die Daten, sondern auch die Spaltenüberschriften anzuzeigen. Das Ergebnis des Codes am Ende von
Kapitel 17 ist in Abbildung 20.1 wiedergegeben.
Abbildung 20.1 XML-Daten in einer
HTML-Tabelle anzeigen
Der Code von Kapitel 17 liest die Daten mithilfe von XML-Methoden direkt. Die nächste Übung konvertiert
den Code, um das XML mithilfe von XMLHttpRequest abzurufen. Wie bei der Übung in Kapitel 19 ist es für
die folgende Übung erforderlich, dass die XML-Datei auf einem Webserver gespeichert ist.
Eine HTML-Tabelle mit XML und CSS erstellen
373
XML-Daten mithilfe von XMLHttpRequest abrufen und anzeigen
1. Verwenden Sie die Datei books.xml, die Sie in Kapitel 17 erstellt haben, oder – wenn Sie keine solche
Datei erstellt oder gespeichert haben – legen Sie jetzt eine Datei namens books.xml mit den folgenden
Daten an (die Sie auch in der Begleitdatei books.xml finden). Platzieren Sie diese Datei auf demselben
Webserver wie die HTML-Datei, die Sie im nächsten Schritt erstellen.
<books>
<book>
<title>JavaScript Step by Step</title>
<author>Steve Suehring</author>
<isbn>9780735624498</isbn>
<publisher>Microsoft Press</publisher>
</book>
<book>
<title>MySQL Bible</title>
<author>Steve Suehring</author>
<isbn>9780764549328</isbn>
<publisher>Wiley Publishing Inc.</publisher>
</book>
</books>
2. Bearbeiten Sie die Datei ajaxbooks.htm im Ordner der Begleitdateien von Kapitel 20 mit Visual Studio,
Eclipse oder einem anderen Editor.
3. Fügen Sie in die Datei ajaxbooks.htm den folgenden fettgedruckten Code (den Sie auch in der Begleitda-
tei ajaxbooks.txt finden) ein und ersetzen Sie dabei die TODO-Kommentare. Achten Sie darauf, den
Platzhalter IHR SERVER für die URL durch die korrekte URL für Ihren Webserver zu ersetzen. Gegen-
über der ursprünglichen Version in Kapitel 18 ändern Sie hier lediglich die Funktionsdefinition und die
erste Zeile der Funktion displayData().
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Booksx</title>
</head>
<body>
<div id="xmldata"></div>
<script type="text/javascript">
function readyAJAX() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try {
return new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {
return "Es ist ein neuerer Browser erforderlich.";
}
}
}
}
var requestObj = readyAJAX();

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required