von Christian Wenz
Der Ursprung von AJAX ist Microsoft. Zu Zeiten des Internet Explorer 5 hat das Internet-Explorer-Team eine Technologie in die Browser integriert, um im Hintergrund HTTP-Anfragen abzusetzen und die Rückgabe auszuwerten. Die Anforderung kam vom Office-Team, genauer gesagt von den Outlook-Entwicklern. Die Web-Schnittstelle von Outlook (OWA – Outlook Web Access) benötigte diese Funktionalität der HTTP-Anfragen im Hintergrund, um beispielsweise ohne permanentes Neuladen zu prüfen, ob es schon neue Mails gibt.
Dieses Feature – implementiert als ein ActiveX-Control namens XMLHttpRequest – fristete lange Zeit ein Schattendasein, denn wo außerhalb eines Intranets ist es überhaupt vertretbar, nur für einen Zielbrowser zu entwickeln?
Doch die Idee hinter XMLHttpRequest ist hervorragend, nur die Beschränkung auf ActiveX ist natürlich für einen systemunabhängigen Einsatz ein Unding. Deswegen haben die Hersteller der anderen Browser nachgelegt und XMLHttpRequest als natives Browserobjekt implementiert. Seit Mozilla 1.0, Netscape 7, Firefox, Safari 1.2, Konqueror 3 und Opera 7 gibt es auch in alternativen Browsern die AJAX-Unterstützung.
XMLHttpRequest kann lediglich eine HTTP-Anfrage an einen Webserver schicken und die Rückgabe auswerten. Sprich, AJAX an sich ist eigentlich eine sehr simple Sache. Die große Kunst besteht dann darin, die Server-Rückgabe irgendwie auf der Seite darzustellen. Dazu verwenden Sie natürlich JavaScript, in der Regel DOM, manchmal auch DHTML. Das wurde bereits behandelt, weswegen dieses Kapitel ausschließlich zeigt, wie Sie den Datenaustausch mit dem Server realisieren.
18.2.1 HTTP-Anfragen senden und auswerten
Das Ganze funktioniert in drei Schritten. Zunächst (Schritt 1) müssen Sie das entsprechende Element erzeugen. Beim Internet Explorer geht das folgendermaßen:
var http = new ActiveXObject("Microsoft.XMLHTTP");
ie ActiveX-Funktionalität von XMLHttpRequest steckt in der XML-Bibliothek von Microsoft; bei neueren Versionen müssen Sie die Versionsnummer explizit angeben. Die gute Nachricht: Obige Variante funktioniert immer, denn auch neuere XML-Versionen liefern noch das alte Objekt mit.
Andere Browser verwenden ein natives Objekt::
var http = new XMLHttpRequest();
Da das XMLHttpRequest-Objekt so populär geworden ist, hat sich Microsoft entschieden, im Internet Explorer 7 XMLHttpRequest ebenfalls als natives Objekt mitzuliefern. Ein Hintergrund ist auch, dass man ActiveX im Internet Explorer abschalten, aber trotzdem JavaScript zulassen kann. Im Internet Explorer 7 funktioniert auch noch der ActiveX-Ansatz, aber eben auch der Weg per nativem JavaScript-Objekt.
Eine entsprechende Abfrage, welcher Browsertyp vorliegt, könnte also wie folgt aussehen:
var http; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); }
Alternativ können Sie natürlich auch mit verschachtelten try–catch-Anweisungen arbeiten.
Schritt 2: Jetzt müssen Sie eine Verbindung zur Zielseite herstellen (die sich aus Sicherheitsgründen innerhalb derselben Domain befinden muss). Geben Sie die URL und die Sendemethode („GET“ oder „POST“ beispielsweise) an, und rufen Sie die Methode open() auf. Als Parameter übergeben Sie (GET- oder POST-)Parameter, die Sie bei der Anfrage mitschicken möchten (oder null, wenn Sie nichts übergeben möchten). Der dritte Parameter gibt an, wie die Kommunikation ablaufen soll:
| false steht für synchron: Die Skriptausführung wird angehalten, bis die Daten vom Server zurückkommen. |
| true steht für asynchron: Die Skriptausführung geht weiter, denn die HTTP-Anfrage wird im Hintergrund ausgeführt. |
In der Regel verwenden Sie asynchrone Kommunikation, denn dann steht nicht die gesamte JavaScript-Applikation, bloß weil der Webserver die Anfrage nur langsam abarbeitet:
http.open("GET", "datei.html", true);
Bei asynchronen Anfragen müssen Sie natürlich Bescheid bekommen, sobald das Ergebnis vom Server da ist. XMLHttpRequest regelt das über eine Callback-Funktion: eine Funktion, die aufgerufen wird, wenn Resultate vom Webserver kommen.
In der Eigenschaft onreadystatechange geben Sie den Namen dieser Callback-Funktion an (als Verweis, also ohne Anführungszeichen); alternativ verwenden Sie eine anonyme Funktion:
http.onreadystatechange = ausgeben;
oder alternativ:
http.onreadystatechange = function() { ... };
Jetzt fehlt nur noch die Funktion zum Ausgeben der Rückgabe Schritt 3. Dazu ist zunächst festzuhalten, dass das Ereignis readystatechange immer dann ausgelöst wird, wenn sich der Zustand des HTTP-XML-Objekts ändert. Das passiert beispielsweise bei der Initialisierung, beim Verbindungsaufbau zur Datei und eben auch, wenn die externe Ressource komplett geladen worden ist. Die zugehörige Eigenschaft heißt readyState und kann die folgenden fünf Werte annehmen:
| 0 – nicht initialisiert |
| 1 – lädt |
| 2 – fertig geladen |
| 3 – wartet |
| 4 – fertig |
Wenn alles geklappt hat, hat die Eigenschaft readyState also den Wert 4. Sie müssen die Variable der XMLHttpRequest-Instanz also global machen, um von überall aus Zugriff darauf zu erhalten.
Wenn alles passt, enthält die Eigenschaft responseText den Inhalt der entfernten Datei; Sie können dann diese Daten weiterverarbeiten. Hier sehen Sie ein vollständiges Listing, das eine simpel gestrickte HTML-Datei einliest und ausgibt:
<html> <head> <title>AJAX</title> <script type="text/javascript"><! – var http = null; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } if (http != null) { http.open("GET", "datei.html", true); http.onreadystatechange = ausgeben; http.send(null); } function ausgeben() { if (http.readyState == 4) { document.getElementById("Ausgabe").innerHTML = http.responseText; } } //--></script> </head> <body> HTML vom Server: <div id="Ausgabe"></div> </body> </html>
Hier der Vollständigkeit halber noch der Inhalt der Datei datei.html:
<p>AJAX ermöglicht <i>spannende</i> Effekte</p>
Wie bereits erwähnt wurde, können Sie bei der Methode send() des XMLHttpRequest-Objekts POST-Parameter mit angeben; GET-Parameter schreiben Sie direkt in die URL. Um diese auszuwerten, benötigen Sie allerdings eine serverseitige Technologie. Das folgende PHP-Skript gibt alle GET- und POST-Daten als HTML-Fragment aus:
<h1>GET</h1> <?php echo nl2br(htmlspecialchars(print_r($_GET, true))); ?> <h1>POST</h1> <?php echo nl2br(htmlspecialchars(print_r($_POST, true))); ?>
Im folgenden Listing übergeben Sie ein paar Parameter an das Skript:
<html> <head> <title>AJAX</title> <script type="text/javascript"><! – var http = null; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } if (http != null) { http.open("GET", "getpost.php?a=1&b=2&c=3", true); http.onreadystatechange = ausgeben; http.send(null); } function ausgeben() { if (http.readyState == 4) { document.getElementById("Ausgabe").innerHTML = http.responseText; } } //--></script> </head> <body> HTML vom Server: <div id="Ausgabe"></div> </body> </html>
Wie Sie im Browser sehen können, gibt das serverseitige Skript die übergebenen Daten aus.
Bei POST ist die Sache nicht ganz so einfach, denn ein Webbrowser schickt bei POST-Anfragen immer einen speziellen HTTP-Header mit, um das serverseitige Skript darauf vorzubereiten. Die zugehörige Methode heißt setRequestHeader(), der HTTP-Header ist Content-Type, und der erforderliche Wert ist „application/x-www-form-urlencoded“. Damit ergibt sich folgendes Listing:
<html> <head> <title>AJAX</title> <script type="text/javascript"><! – var http = null; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } if (http != null) { http.open("POST", "getpost.php", true); http.onreadystatechange = ausgeben; http.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded"); http.send("a=1&b=2&c=3"); } function ausgeben() { if (http.readyState == 4) { document.getElementById("Ausgabe").innerHTML = http.responseText; } } //--></script> </head> <body> HTML vom Server: <div id="Ausgabe"></div> </body> </html>
Abbildung 18.6 zeigt das Ergebnis: Das Skript empfängt die POST-Daten und schickt sie wieder zurück.
Abbildung 18.6 Mit einem Extra-HTTP-Header funktionieren auch POST-Anfragen.
18.2.3 Mit komplexen Daten arbeiten – JSON
In Kapitel 13 haben Sie zwei platzsparende JavaScript-Notationen kennengelernt:
| Arrays können mit eckigen Klammern angegeben werden: |
["eins", "zwei", "drei"]
| Objekte können mit geschweiften Klammern angegeben werden: |
{"Eigenschaft": "Wert", "Methode": function() { ... }}
Und obwohl das tatsächlich Teil der JavaScript-Spezifikation ist, wurde das Ganze erst bekannt, seitdem es einen Namen gibt. Der lautet JSON – JavaScript Object Notation.
Das Schöne an JSON ist, dass damit Arrays und Objekte sehr simpel als Zeichenkette angegeben werden können; man spricht hier auch von Serialisierung.
Der eigentliche Clou bei JSON ist, dass diese Strings sehr einfach wieder in JavaScript-Arrays oder Objekte zurückverwandelt werden können: mit eval()! Hier ein Beispiel:
var json_array = '["eins", "zwei", "drei"]'; var json_objekt = '{"Eigenschaft": "Wert", "
Methode": function() { alert(this.Eigenschaft); } }'; var a = eval("(" + json_array + ")"); var o = eval("(" + json_objekt + ")"); alert(a.length); // gibt "3" aus o.Methode(); // gibt "Wert" aus
In Verbindung mit AJAX sehen Sie, wie unverzichtbar JSON in nur kürzester Zeit geworden ist. Denn wenn Sie von der Serverseite her mehr als nur bloßen Text zurückgeben möchten, ist JSON ein perfektes Format dafür.
Ein kleines Beispiel soll zeigen, was damit möglich ist. Erinnern Sie sich noch an das Beispiel in Kapitel 16, in dem dynamisch eine HTML-Aufzählungsliste aus einem JavaScript-Objekt erstellt worden ist? Dieses Beispiel finden Sie im Folgenden wieder, nur kommt diesmal das JavaScript-Objekt vom Server – in Form eines JSON-Strings:
<html> <head> <title>AJAX</title> <script type="text/javascript"><! – var http = null; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } if (http != null) { http.open("GET", "json.txt", true); http.onreadystatechange = ausgeben; http.send(null); } function ausgeben() { if (http.readyState == 4) { var daten = http.responseText; daten = eval("(" + daten + ")"); var liste = document.getElementById("Liste"); for (var i = 0; i < daten.length; i++) { var link = daten[i]; var li = document.createElement("li"); var a = document.createElement("a"); a.setAttribute("href", link.url); var txt = document.createTextNode(link.text); a.appendChild(txt); li.appendChild(a); liste.appendChild(li); } } } //--></script> </head> <body> <ul id="Liste"></ul> </body> </html>
Hier der Vollständigkeit halber noch der Inhalt der Datei json.txt:
[ {"text": "Mozilla", "url": "http://www.mozilla.com/"}, {"text": "Microsoft", "url": "http://www.microsoft.com/"}, {"text": "Opera", "url": "http://www.opera.com/"} ]
In Abbildung 18.7 können Sie das Ergebnis sehen: Die Listendaten kommen aus der JSON-Datei.
Abbildung 18.7 Die Liste wurde mit JSON-Daten gefüllt.
Die JavaScript-Funktion eval() ist relativ gefährlich, denn sie führt Code aus. Sie müssen also der Quelle, von der die JSON-Daten kommen, unbedingt vertrauen. Somit sind beispielsweise Daten von Ihrem eigenen Webserver in Ordnung, Daten aus der URL dagegen scheiden aus.
18.2.4 Anfragen abbrechen
Bei AJAX-Anfragen per XMLHttpRequest gibt es leider einen kleinen Nachteil: Das Error-Management ist schwierig bis hin zu nicht möglich. Sie erfahren nämlich nicht, wenn eine Anfrage kein Ergebnis liefert oder zu einem Fehler führt. Das heißt, unter Umständen warten Sie vergeblich auf eine Rückgabe.
Mit der Methode abort() des XMLHttpRequest-Objekts brechen Sie eine Anfrage ab, wenn sie zu lange dauert. Um das zu demonstrieren, erstellen wir ein PHP-Beispiel namens langsam.php – ein Skript, das unter Umständen langsam läuft (einen zufälligen Wert zwischen eine und zehn Sekunden):
<?php $zufall = rand(1, 10); sleep($zufall); ?> <p>AJAX ermöglicht <i>spannende</i> Effekte</p>
Kommen wir nun zum Listing mit der Timeout-Überprüfung. Zunächst geben Sie die URL des »langsamen« PHP-Skripts an. Kleiner Kniff am Rande: An die URL wird eine Zufallszahl als GET-Parameter angehängt. Das verhindert Browser-Caching, so dass das PHP-Skript bei jedem Aufruf auch eine andere Laufzeit hat:
http.open("GET", "langsam.php?" + Math.random(), true);
Dann erstellen Sie einen Timeout: Nach fünfeinhalb Sekunden soll die Anfrage abgebrochen werden:
id = window.setTimeout("abbrechen()", 5500);
In dieser Funktion abbrechen() rufen Sie die Methode abort() auf und geben eine entsprechende Meldung aus:
function abbrechen() { http.abort(); document.getElementById("Ausgabe").innerHTML = "Die Anfrage dauerte zu lange."; }
Kommt allerdings vor Ablauf der fünfeinhalb Sekunden ein Ergebnis vom Server, muss natürlich der Timeout gelöscht werden:
function ausgeben() { if (http.readyState == 4) { document.getElementById("Ausgabe").innerHTML = http.responseText; window.clearTimeout(id); } }
Hier noch einmal der komplette Code im Überblick:
<html> <head> <title>AJAX</title> <script type="text/javascript"><! – var http = null; var id = null; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } if (http != null) { http.open("GET", "langsam.php?" + Math.random(), true); http.onreadystatechange = ausgeben; http.send(null); id = window.setTimeout("abbrechen()", 5500); } function ausgeben() { if (http.readyState == 4) { document.getElementById("Ausgabe").innerHTML = http.responseText; window.clearTimeout(id); } } function abbrechen() { http.abort(); document.getElementById("Ausgabe").innerHTML = "Die Anfrage dauerte zu lange."; } //--></script> </head> <body> HTML vom Server: <div id="Ausgabe"></div> </body> </html>
Probieren Sie es aus: In etwa der Hälfte der Fälle erscheint ein Ergebnis vom Server, in der anderen Hälfte sehen Sie eine Fehlermeldung.
Abbildung 18.8 Der Server war schnell genug.
Denken Sie immer daran: Wenn Sie PHP-Skripte ausführen, benötigen Sie einen PHP-fähigen Webserver und müssen die Beispiele per http://<servername>/<dateiname> aufrufen, nicht direkt über das Dateisystem.
Abbildung 18.9 Der Server war zu langsam.
Mit der gezeigten Technik können Sie also einfach einen Mechanismus implementieren, der nach dem Ablauf von ein paar Sekunden erkennen kann, dass der Server Probleme hat, und dementsprechend darauf reagiert.
18.2.5 Weitere Möglichkeiten
Zum Abschluss des Technik-Blocks folgt hier noch ein kurzer Überblick, was das XMLHttpRequest-Objekt sonst noch bietet (die komplette Auflistung der Eigenschaften und Methoden finden Sie in der Referenz):
| Das Auslesen aller (getAllResponseHeaders()) oder eines (getResponseHeader()) HTTP-Headers |
| Auswertung des HTTP-Statuscodes (status) samt textueller Beschreibung (statusText) |
| Zugriff auf den Rückgabewert als XML-DOM-Objekt (responseXML) |
Auch die Verwendung von HTTP-Authentifizierung ist möglich, wenn der Benutzername und das Passwort in der URL angegeben werden:
http://Benutzer:Passwort@Servername/Pfad/Datei.xyz
Allerdings ist das eine fragwürdige Implementierung: Der JavaScript-Code und auch der HTTP-Verkehr sind nicht verschlüsselt, somit sind Benutzername und Passwort im Klartext einsehbar.
Dieser Artikel stammt aus dem Buch ‚JavaScript & AJAX‘ von Christian Wenz, das bei Galileo Computing erschienen ist. Infos und Bezug
