JavaScript - Schritt für Schritt

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();