18.2 AJAX-Technik   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 namensXMLHttpRequest – 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 hinterXMLHttpRequest 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 undXMLHttpRequest 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.1 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");Die ActiveX-Funktionalität vonXMLHttpRequest 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 dasXMLHttpRequest-Objekt so populär geworden ist, hat sich Microsoft entschieden, im Internet Explorer 7XMLHttpRequest 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 verschachteltentry-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 Methodeopen() auf. Als Parameter übergeben Sie (GET- oder POST-)Parameter, die Sie bei der Anfrage mitschicken möchten (odernull, wenn Sie nichts übergeben möchten). Der dritte Parameter gibt an,wie die Kommunikation ablaufen soll:  | false steht fürsynchron: Die Skriptausführung wird angehalten, bis die Daten vom Server zurückkommen. |
| | true steht fürasynchron: 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 Eigenschaftonreadystatechangegeben 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 Ereignisreadystatechange 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 Ressourcekomplett geladen worden ist. Die zugehörige Eigenschaft heißtreadyState 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 EigenschaftreadyState also den Wert4. Sie müssen die Variable derXMLHttpRequest-Instanz also global machen, um von überall aus Zugriff darauf zu erhalten. Wenn alles passt, enthält die EigenschaftresponseTextden 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></div></body></html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 18.5 Die HTML-Daten kommen vom Server. Hier der Vollständigkeit halber noch der Inhalt der Dateidatei.html: <p>AJAX ermöglicht <i>spannende</i> Effekte</p>
18.2.2 Parameter senden Wie bereits erwähnt wurde, können Sie bei der Methodesend() desXMLHttpRequest-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></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ßtsetRequestHeader(), der HTTP-Header istContent-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></div></body></html>Abbildung 18.6 zeigt das Ergebnis: Das Skript empfängt die POST-Daten und schickt sie wieder zurück. 
Hier klicken, um das Bild zu Vergrößern
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. Eine eigene Homepage gibt es dafür sogar auch, nämlichhttp://json.org/. Das Schöne an JSON ist, dass damit Arrays und Objekte sehr simpel als Zeichenkette angegeben werden können; man spricht hier auch vonSerialisierung. Der eigentliche Clou bei JSON ist, dass diese Strings sehr einfach wieder in JavaScript-Arrays oder Objekte zurückverwandelt werden können: miteval()! 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" auso.Methode(); // gibt "Wert" ausIn 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. Im folgenden Kapitel lernen Sie einen anderen, aber deutlich komplizierteren Weg kennen. 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></ul></body></html>Hier der Vollständigkeit halber noch der Inhalt der Dateijson.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. 
Hier klicken, um das Bild zu Vergrößern
Abbildung 18.7 Die Liste wurde mit JSON-Daten gefüllt. Die JavaScript-Funktioneval()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 perXMLHttpRequest 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 Methodeabort() desXMLHttpRequest-Objekts brechen Sie eine Anfrage ab, wenn sie zu lange dauert. Um das zu demonstrieren, erstellen wir ein PHP-Beispiel namenslangsam.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 Funktionabbrechen() rufen Sie die Methodeabort() 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></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. 
Hier klicken, um das Bild zu Vergrößern
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 perhttp://<servername>/<dateiname> aufrufen, nicht direkt über das Dateisystem. 
Hier klicken, um das Bild zu Vergrößern
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 dasXMLHttpRequest-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) – mehr dazu im nächsten Kapitel! |
Auch die Verwendung von HTTP-Authentifizierung ist möglich, wennder 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. | 
