AJAX und das Web 2 0 - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 312

getElementsByTagName("img")[0].onmouseout = function() {
out();
}
getElementsByTagName("img")[1].onmouseout = function() {
out();
}
getElementsByTagName("img")[2].onmouseout = function() {
out();
}
}
}
window.onload = init;
Die JavaScript-Datei enthält nun ein paar sehr interessante Stellen. Beachten Sie zuerst,
dass wir in der init() -Funktion anonyme Funktionen bei dem Eventhandler registrieren.
Wir können damit der Funktion sndReq() einen Parameter übergeben. Auf jedem Bildbe-
reich wird ein speziischer Parameter der Funktion übergeben. Dieser dient zur Steuerung,
welche Information wo angezeigt wird. Die Tabelle enthält dazu in der zweiten Zeile Zellen
mit jeweils einer speziischen ID. Diese ID ist nach einem gewissen Muster vergeben, das
eine Unterscheidung über einen einfachen numerischen Algorithmus erlaubt, der an dem
übergebenen Parameter an die Funktion sndReq() orientiert ist.
Da wir der Funktion sndReq() einen Parameter übergeben, können wir im Inneren der
Funktion diesen Parameter dazu nutzen, gezielt eine speziische Textdatei auszuwählen,
die je nach Parameter angefordert wird. Dazu verwenden wir einfach switch-case .
PrAXISTIPP: Die Namen der angeforderten Dateien könnten Sie übrigens auch
über einen analogen numerischen Algorithmus zusammensetzen, der etwas weiter
unten zum automatischen Bestimmen der ID verwendet wird. Das Listing ist hier
nur etwas allgemeiner formuliert.
Die angeforderten Textdateien enthalten übrigens zum Teil HTML-Fragmente, wie Sie an
der Ausgabe erkennen können. Diese HTML-Anweisungen werden dann beim Nachladen
der Textdatei vom Browser direkt interpretiert. Dies eröfnet alle Möglichkeiten zur Gestal-
tung der Antwort des Webservers sowie z. B. zum Nachladen von externen Ressourcen über
HTML-Referenzen.
Die nächste interessante Stelle inden Sie beim Registrieren einer anonymen Funktion
beim Eventhandler onreadystatechange . Damit können wir der registrierten Funktion
handleResponse() einen Parameter übergeben und zwar den Wert, der bereits an sndReq()
übergeben wurde. Dieser wird in der Funktion handleResponse() zum Zusammensetzen
der ID genutzt, welche die Tabellenzelle speziiziert, in der die Antwort des Servers ange-
zeigt werden soll. Diese ID war ja bewusst so gewählt, dass man sie über einen einfachen
numerischen Algorithmus aus dem Übergabeparameterwert an sndReq() bestimmen kann.
Die Funktion zum Löschen der Anzeigebereiche leert einfach alle Anzeigebereiche. Wir
brauchen hier keine individuelle Logik! Sie sehen an diesem Beispiel, dass Sie bereits mit
reinen statischen Textdateien auf dem Server eine komplexe Logik in die AJAX-Applikation
einbauen können. Man muss diese Logik eben nur in JavaScript implementieren und auf
dem Client ausführen.