Der Client hat vom Server eine Seite angefordert und diese dargestellt.
Auf der Seite befindet sich (zumindest) ein Element, das bei einer Benutzer-Aktivität
ein Event auslöst, durch zum Beispiel onclick, onchange, onkeyup.
Das Event ist in Javascript geschrieben, läuft auf dem Client und fordert asynchron
vom Server Daten an. Asynchron bedeutet, dass der Benutzer auf der Seite weiter
arbeiten kann und nicht auf die Antwort des Servers warten muss. Die Daten
können beispielsweise - wie im ersten Beispiel unten - aus der auf dem Server (!)
ermittelten Uhrzeit bestehen. Sobald der Client erkennt, dass die Übertragung der
Daten vom Server abgeschlossen ist, stellt er die Daten auf der Seite dar.
Wichtig: Eine Datenanforderung liefert einen (einzigen) Datensatz. Wenn der
Request die Eigenschaft responseText (s.u.) hat, wird der Datensatz als reiner Text
geliefert. Eine innere Strukturierung muss dann durch den Client ausgewertet werden. Hat der
Request die Eigenschaft responseXML (s.u.), trägt der gelieferte Datensatz XML-Struktur.
Wichtig: Nur dann erhält der Benutzer den Eindruck, als ob er auf einem Desktop
arbeitet, wenn der durch die Anfragen ausgelöste Traffic aus nur wenigen Bytes
besteht. Die Last auf Client und Server kann hoch sein, der ausgelöste Traffic
muss gering bleiben. Die Herausforderung bei der AJAX-Programmierung besteht darin,
Traffic zu vermeiden. Statt zum Beispiel umfangreiche Seitenbereiche mit AJAX
aufzubauen, kann man sie zu Beginn aufbauen und dann (style.display = 'none' oder
style.visibility = 'hidden') unsichtbar machen.
Es wird dabei das XMLHttpRequest-Objekt genutzt. Diese vier Schritte sind in dieser Reihenfolge in einer
JavaScript-Funktion enthalten, die bei einem Event aufgerufen wird:
-- Instanz von XMLHttpRequest anlegen,
----- var httprequest = new XMLHttpRequest();
-- Listener auf Änderungen des readyState von httprequest anlegen.
----- httprequest.onreadystatechange = updatePage;
----- Bei Beendigung der Übertragung vom Server sorgt updatePage für die Auswertung
der erhaltenen Daten.
-- Anfrage formulieren.
----- Das ist die URL eines Server-Skripts mit zusätzlichen Parametern.
----- Z.B. url = query.php + "?" + element.name + "=" + element.value;
-- Öffnen und Senden von httprequest
----- httprequest.open("GET",url,true);
----- httprequest.send(null);
Auf einer HTML-Seite wird die JavaScript-Funktion zum Beispiel in einem Formular über onkeyup aufgerufen
und schickt ihre Ergebnisse an einen mit einer Id versehenen Tag der HTML-Seite
(id="myID" ist eindeutig auf einer Seite, class="myclass" ist es in der Regel nicht).
XMLHttpRequest hat zwei Eigenschaften:
-- httprequest.responseText
-- httprequest.responseXML
httprequest.responseText enthält das Abfrage-Ergebnis als eine Zeichenkette,
httprequest.responseXML als einen XML-Baum (Die Zeichenkette ist der serialisierte XML-Baum!).
Für die Analyse ist der XML-Baum geeigneter, allerdings habe ich damit im Internet Explorer bisher nicht
zu lösende Schwierigkeiten, da der IE nur reine XML-Dateien behandeln kann und keine HTML-Dateien.
getElementById geht bei XML natürlich nicht.
-- Mit responseXML kann IE nur Dateien mit xml-Erweiterung bearbeiten, die anderen Browser auch solche mit html-Erweiterung.
-- Ohne die folgende Anweisung geht responseXML in FF nicht, obwohl in Apache mime.types "text/xml xml" gesetzt wurde.
httprequest.overrideMimeType("text/xml");
-- Die URL wird von Aufruf zu Aufruf geändert, damit der Server neu laden muß.
var url="responsexml.xml" + "?sid="+Math.random(); (sid = Session-ID)
-- Ohne die folgende Anweisung geht POST nicht.
httprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
-- Wenn in updatePage die Funktion alert enthalten ist, geht FF nicht.
Christian Wenz: JavaScript - Das umfassende Handbuch, Galileo Press, 2009
(Das Buch ist auf den Internet Explorer fokussiert, es bringt kein Beispiel zu responseXML)
http://www.w3schools.com/ajax/default.asp
Erste Einrichtung: April 2010
Letzte Aktualisierung: 25.11.2012 13:24:52