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

Sie sehen, dass die Webseite neben einer Schaltläche einen leeren <div> -Container enthält,
der im Folgenden mit AJAX gefüllt werden soll. Der <div> -Container hat ein Attribut id und
dieses ist der Schlüssel zum Zugrif.
Im Header inden Sie die Referenzen auf eine CSS-Datei, dann die externe JavaScript-Datei
zum Erzeugen eines XHR-Objekts, wie wir sie gerade besprochen haben, und die Referenz
auf die zweite externe JavaScript-Datei kap10_1.js . Diese enthält die Funktionalität, um
Daten auf Basis eines XHR-Objekts asynchron vom Webserver anzufordern und diese über
die AJAX-Engine in die Webseite zu integrieren, ohne eine neue Webseite laden zu müssen.
Beachten Sie, dass alle eingebundenen JavaScript-Dateien sowie in der Webseite selbst
beindliche JavaScript-Container dem gleichen Scope zugeordnet sind und sich damit
gegenseitig verwenden können (wir werden in den folgenden Beispielen grundsätzlich so
eine Verteilung der externen JavaScript-Dateien und des internen Skriptbereichs vorneh-
men):
Listing 10.5■ Die externe JavaScript-Datei zur Datenanforderung per AJAX
var resOb = erzXHRObjekt();
function sndReq() {
resOb.open('get', 'serverantworten/kap10_1.txt', true);
resOb.onreadystatechange = function() {
if (resOb.readyState == 4) {
document.getElementById("antwort").innerHTML = resOb.responseText;
}
};
resOb.send(null);
}
window.onload = function() {
document.getElementById("frage").onclick = sndReq;
};
Die externe JavaScript-Datei enthält zuerst die Erzeugung des XHR-Objekts, das in einer
globalen Variablen referenziert wird. Wir verwenden dazu die universelle Funktion zum
Erzeugen eines XHR-Objekts aus der anderen externen JavaScript-Datei. Darüber werden in
den nachfolgend deinierten Funktionen Daten vom Server angefordert und mit JavaScript
wieder bereitgestellt.
Beachten Sie den Eventhandler document.getElementById("frage").onclick = sndReq; .
Damit wird bei einem Klick des Anwenders auf die Schaltläche die JavaScript-Funktion
sndReq() aufgerufen. Darin wird zuerst eine HTTP-GET-Verbindung zum Webserver durch
resOb.open() initialisiert. Der erste Parameter in der open() -Methode speziiziert die Art
der HTTP-Anforderung. In unserem Fall wird die GET-Methode gewählt. Der zweite Parame-
ter ist die Zieladresse der Anfrage. Dies ist in diesem Fall ein gewöhnlicher URL auf eine
statische Textdatei (eine relative Pfadangabe). Der dritte Parameter gibt an, ob die Kommu-
nikation asynchron erfolgen soll oder nicht. Der Wert true gibt an, dass die Kommunikation
asynchron laufen soll.
Sobald die HTTP-Antwort beim Client wieder eintrit, muss man nun darauf reagieren kön-
nen. Dazu deinieren wir eine Funktion zum Umgang mit der Antwort. Diese wird allgemein
vor dem Aufruf der send() -Methode an die onreadystatechange -Eigenschat des XHR-
Objekts gebunden. Die hier angegebene anonyme Callback-Funktion wird bei jeder Status-
änderung der HTTP-Anfrage durch den Server ausgeführt.