Insgesamt stecken hinter dem Überbegriff AJAX eine ganze Reihe von Technologien und ihr Zusammenspiel, die aber alle keineswegs neu sind:

Transkript

1 AJAX Asynchronous JavaScript and XML AJAX gilt als die Schlüsseltechnologie des Web AJAX ist eine clientseitige Technik, die in allererster Linie auf JavaScript basiert. Dabei ist die entscheidende Kernfunktion von AJAX, dass mittels eines JavaScripts eine erneute, vom Benutzer nicht initiierte Verbindung zu einem Webserver hergestellt werden kann. Insgesamt stecken hinter dem Überbegriff AJAX eine ganze Reihe von Technologien und ihr Zusammenspiel, die aber alle keineswegs neu sind: (x)html als Basis für die Anzeige im Browser CSS für die Formatierung der Inhalte im Browser DOM das Document Object Model zum Adressieren der HTML-Objekte im Browser. Streng genommen ist das DOM nichts anderes als der Objektbaum aller HTML-Objekte im Browser und ihre hierarchische Abhängigkeit untereinander. JavaScript zur Manipulation der DOM-Objekte und zur Kommunikation mit dem Webserver. In diesem Zusammenhang ist insbesondere der Einsatz des JavaScript-Objektes XMLHttpRequest von Bedeutung. XML als Standard-Format zum Datenaustausch Die Grundidee von AJAX ist folgende: Bei klassischen http-requests durch einen Benutzer wird genau eine Internet-Seite vom Webserver angefordert und an den Browser übermittelt. Nach der Übermittlung könnte die Verbindung zwischen Browser und Webserver auch getrennt werden, ohne dass das die Darstellung der Seite beeinflussen würde. Daher müssen alle Daten, die auf der Internet-Seite in irgendeinem Fall benötigt werden (also z.b. lange Auswahllisten, voneinander abhängige Auswahllisten oder erst unter gewissen Umständen eingeblendete Inhalte) von vornherein mit übertragen werden ob sie nun im konkreten Fall benötigt werden oder nicht. Das kostet unnötig Bandbreite. Außerdem ändert sich oftmals beim Surfen innerhalb einer Site nur ein sehr kleiner Teil der angezeigten Inhalte, während sehr viele Elemente (Hintergrundbilder, Menüstruktur, Logos etc.) immer gleich bleiben. Trotzdem müssen bei jedem Request wieder alle diese Inhalte übertragen werden (was bei Bildern bspw. durch Caching-Funktionen der Browser gemildert werden kann, aber bei der Menüstruktur und anderen Inhalten i.d.r. nicht). Das dauert lange und kostet unnötige Bandbreite. AJAX ist nun eine Herangehensweise, beim ersten Aufruf nur noch die unbedingt notwendigen Informationen zu übertragen, und solche, die nur unter gewissen Umständen angezeigt werden sollen, bei Bedarf nachzuladen. Dazu kann mittels des XMLHttpRequest-Objektes von JavaScript aus eine erneute Verbindung zum Server hergestellt und damit die notwendigen Daten nachträglich übertragen werden. 1 Der Vollständigkeit halber sei gesagt, dass der Begriff Web 2.0 keineswegs nur einen technologischen Wandel beschreibt, sondern viel mehr einen kulturellen Wandel der Netzgemeinschaft. Die (keineswegs neuen) Technologien sind nur eine Randerscheinung, die die Möglichkeiten des Internets verändern. AJAX Stand: Seite 1

2 beliebige Wiederholung Fachhochschule Frankfurt am Main HTTP-Zugriffe einer Internet-Seite unter Verwendung des XMLHttpRequest-Objektes (AJAX) Client Server JavaSkript-Engine Browser Webserver Anfordern einer Adresse (URL) Laden der Datei Verarbeiten der Daten Senden der Datei an den Browser Laden der JavaSkript-Engine, Initialisieren des XMLHttpRequest-Objektes Darstellen der Daten Anfordern einer Adresse (URL) durch das XMLHttpRequest-Objekt Laden der Datei Senden der Datei Verarbeiten der Daten Manipulieren der im Browser angezeigten Objekte (z.b. DIV-Boxen o.ä.) Änderung der Anzeige AJAX Stand: Seite 2

3 Eine Website, die AJAX-Technologien verwendet, arbeitet also im Normalfall so: 1. Aufruf der Seite durch den Benutzer. Es werden nur die unbedingt notwendigen Daten übertragen. 2. Je nach Benutzeraktion (z.b. Auswahl aus einer Liste) stellt JavaScript eine erneute Verbindung zum Webserver her. 3. Die vom Webserver an JavaScript (nicht an die Anzeige im Browser!) übermittelten Daten die von der Grundidee her im XML-Format vorliegen sollten, praktisch aber beliebige Formate, also auch HTML, haben dürfen werden von JavaScript ausgewertet. 4. Mittels JavaScript können dann alle Elemente auf der Website verändert werden, also z.b. mit neuen Daten gefüllt werden. Das XMLHttpRequest-Objekt Der erneute Verbindungsaufbau zum Webserver ist nur mittels des XMLHttpRequest-Objektes möglich, das schon seit 1998 im Internet-Explorer Verwendung findet. Leider ist das Objekt in verschiedenen Browsern unterschiedlich implementiert: Im Internet- Explorer vor Version 7 ist es eine ActiveX-Komponente (also ein externes Modul), in Mozilla/Firefox u.a. ist es fest implementiert. Damit muss das Objekt in allen Browsern unterschiedlich verwendet werden. Zum Glück sind jedoch lediglich die Initialisierungen unterschiedlich, die Verwendung dann aber in allen Browsern gleich. Initialisierung des XMLHttpRequest-Objektes: Im Internet-Explorer 5: xhttp=new ActiveXObject("Microsoft.XMLHTTP") Im Internet-Explorer 6: xhttp=new ActiveXObject("Msxml2.XMLHTTP") Andere Browser (Mozilla, Opera, Safari, IE7 etc.): xhttp=new XMLHttpRequest(); Verwendung (in allen Browsern): Öffnen eines neuen Server-Requests: xhttp.open(<methode>, <URL>, <Übertragungsart>); o <Methode> = GET oder POST o <URL> = Eine URL auf dem gleichen Server, von dem die Hauptseite stammt(!) o <Übertragungsart> = TRUE für eine asynchrone Übertragung (der Request findet im Hintergrund statt und beeinflusst nicht den Browser), FALSE für eine synchrone Übertragung (Während der Übertragung wartet der Browser auf das Ergebnis und blockiert ihn damit) Registrieren einer JavaScript-Funktion, die beim Statuswechsel ausgeführt wird xhttp.onreadystatechange = <Funktionsname>; Gültige Stati, die das XMLHttpRequest-Objekt annehmen kann sind: o 0=UNINITIALIZED, das Objekt wurde noch nicht initialisiert o 1=LOADING, Wartezustand, es wurde noch nichts angefordert o 2=LOADED, der Request wurde abgesetzt, der Antwort-Header ist schon da o 3=INTERACTIVE, die Daten werden gerade vom Server empfangen o 4=COMPLETED, die Kommunikation mit dem Server ist abgeschlossen Die Funktion <Funktionsname> wird bei jedem Statuswechsel aufgerufen! Es muss also in der Funktion der aktuelle Status überprüft werden. Senden des Requests: xhttp.send(null); Der in xhttp.open() geöffnete Request wird an den Webserver geschickt. Zugriff auf die vom Webserver gesendeten Daten: xhttp.responsetext (im Text-Format), xhttp.responsexml (im XML-Format) AJAX Stand: Seite 3

4 Bei der Verwendung des Objektes ist eine der ganz entscheidenden Eigenschaften die Übertragungsart synchron oder asynchron. In der open -Methode wird festgelegt, welche verwendet wird. Bei der asynchronen Übertragung wird der Request im Hintergrund aufgebaut und beeinflusst den Browser nicht. Diese Übertragungsart sollte also verwendet werden, wenn es auf den genauen Zeitpunkt der Anzeige der Inhalte nicht so genau ankommt (bspw. zusätzlich eingeblendete Informationen wie Hilfetexte o.ä.) Bei der synchronen Übertragung wird der Browser bis zur vollständigen Abarbeitung der Anfrage also bis alle Inhalte angekommen sind angehalten. Da dieses den Benutzer massiv einschränkt, sollte diese Art nur gewählt werden, wenn die Ergebnisse vor der nächsten Benutzeraktion unbedingt zur Verfügung stehen müssen. Das ist insbesondere bei voneinander abhängigen Auswahllisten der Fall. Ganz wichtig zu wissen ist, dass das X in AJAX zwar für XML steht und damit suggeriert, XML wäre ein elementarer Bestandteil und das einzig mögliche Übertragungsformat der Daten. Praktisch ist das jedoch nicht so, und es können beliebige Formate übertragen werden. In der Praxis wird sehr häufig einfach valides (x)html übermittelt, weil es viel einfacher im Browser angezeigt werden kann. Verwendung von AJAX am Beispiel eines kleinen Chat-Systems Um eine AJAX-Anwendung wie beispielsweise einen Chat zu entwickeln, braucht man insgesamt 4 Programmteile (wobei diese natürlich auf verschiedene Arten in physikalische Dateien verteilt werden können): Eine Hauptdatei, die dem Benutzer im Browser angezeigt wird (im Beispiel ajax_chat.html genannt) Ein paar JavaScript-Funktionen zur Kommunikation mit dem Server und zum Verändern der Anzeige im Browser (im Beispiel ajax_chat.js genannt) Eine Datei, die von JavaScript aus aufgerufen wird und die anzuzeigenden Daten liefert (im Beispiel lese_nachrichten.php genannt) und im Falle eines Chats, in dem ja auch Daten geschrieben werden können sollen, eine Datei, die von JavaScript aus aufgerufen wird und das Abspeichern der Daten vornimmt (im Beispiel scheibe_nachricht.php genannt) ajax_chat.html: <html> <head> <title>ajax-chat</title> <!-- Hinzuladen der JavaScript-Bibliothek --> <script type="text/javascript" src="ajax_chat.js"></script> </head> <body > <!-- DIV-Box mit eindeutigem Namen (ID), in der die Nachrichten angezeigt werden sollen --> <div id="chatbox" style="width:500px;height:200px;border-style:solid;overflow:auto;"> </div> <!-- Ein Formular, in das neue Nachrichten eingegeben werden können --> <form name="formular" onsubmit="javascript:sende_nachricht();return false;"> Nachricht: <input type="text" name="neue_nachricht"> <input type="submit" value="abschicken"> </form> </body> </html> AJAX Stand: Seite 4

5 ajax_chat.js // Dieser Programmteil wird sofort beim Laden der Datei ausgeführt!!! // Sie initialisiert das XMLHttpRequest-Objekt und startet eine Funktion zum // Laden der Inhalte var xhttp=false; // Da die Initialisierung des XMLHttpRequest-Objektes in allen Browsern // unterschiedlich ist, werden einfach alle Methoden in try-except-statements // ausprobiert try // Initialisierung des Objektes im Internet-Explorer 6 xhttp=new ActiveXObject("Msxml2.XMLHTTP"); catch(e) try // Initialisierung des Objektes im Internet-Explorer 5 xhttp=new ActiveXObject("Microsoft.XMLHTTP"); catch(e) try // Initialisierung des Objektes in Mozilla/Firefox und Opera xhttp=new XMLHttpRequest(); catch(e) // Kein xhttp-objekt vorhanden // Alle 3 Sekunden wird die Funktion hole_nachrichten aufgerufen setinterval("hole_nachrichten()",3000); // Diese Funktion stellt eine Verbindung zum Server her und holt // die neuen Daten aus der Datei lese_nachrichten.php ab function hole_nachrichten() // Überprüfen, ob die Initialisierung funktioniert hat if (xhttp) // Aufrufen der Datei lese_nachrichten.php, die die Inhalte liefern soll. // Der Parameter rnd wird mit einer Zufallszahl gefüllt, da ansonsten die // Gefahr besteht, dass der Browser die Datei aus dem Cache holt und somit // keine neuen Nachrichten anzeigt. Durch den rnd-parameter ist die Datei // für den Browser unbekannt und wird daher auf jeden Fall geladen. // Die Übertragung soll asynchron erfolgen. xhttp.open('get', 'lese_nachrichten.php?rnd='+string(math.random()), true); // Bei jedem Statuswechsel des XMLHttpRequest-Objektes soll die Funktion // zeige_nachrichten aufgerufen werden xhttp.onreadystatechange = zeige_nachrichten; // Senden des Requests an den Server xhttp.send(''); AJAX Stand: Seite 5

6 // Diese Funktion überprüft, ob die Daten angekommen sind, und tauscht dann // im Hauptdokument (ajax_chat.html) den Text in der DIV-Box chatbox aus function zeige_nachrichten() // Ist das XMLHttpRequest-Objekt im Status COMPLETED, ist die // Datenübertragung also abgeschlossen? if (xhttp.readystate == 4) // Tausche den Inhalt der DIV-Box chatbox gegen die übermittelten // Daten aus document.getelementbyid("chatbox").innerhtml = xhttp.responsetext; // Diese Funktion stellt eine Verbindung zum Server her und schickt ihm die // Daten, die gespeichert werden sollen (eine neue Nachricht) function sende_nachricht() if (xhttp) // Aufrufen der Datei schreibe_nachricht.php zusammen mit den Inhalten, // die im Hauptdokument im Formular eingegeben wurden. // Die Funktion escape konvertiert die eingegebenen Daten in ein // zeichensatzunabhängiges Format, da ansonsten Umlaute nicht richtig // übermittelt würden. xhttp.open('get', 'schreibe_nachricht.php?neue_nachricht=' +escape(document.formular.neue_nachricht.value)); // Senden des Requests an den Server xhttp.send(null); // Leeren des Eingabefeldes und setzen des Fokus auf das Feld (damit man // gleich die nächste Nachricht schreiben kann) document.formular.neue_nachricht.value=''; document.formular.neue_nachricht.focus(); AJAX Stand: Seite 6

7 lese_nachrichten.php <?php // Diese Datei liest aus einer Datenbank die letzten 10 Einträge aus und // schickt sie an den Client (das JavaScript!) // Die Programmiersprache, in der diese Datei geschrieben ist, ist völlig // egal (es könnte auch eine.html,.txt,.py,.pl oder sonstiges sein)! // Wichtig ist nur, dass die Ausgabe dieser Datei die Eingabe für das // JavaScript ist. // Herstellen der DB-Verbindung $db_handler=mysql_connect(<host>, <User>, <Password>) if ($db_handler) mysql_select_db("chat", $db_handler); // Auslesen der max. 10 neuesten Beiträge $result=mysql_query( "SELECT nachricht FROM chat_nachrichten order by zeitpunkt desc limit 0,10", $db_handler); // Gibt es Einträge? if > 0) // Ausgeben aller Einträge (die Ausgabe erfolgt nicht am Bildschirm, // sondern ist die Eingabe für das JavaScript!) while($row=mysql_fetch_array($result)) // htmlentities wandelt Sonderzeichen in HTML-Entitäten um, damit // Umlaute problemlos dargestellt werden echo htmlentities($row["nachricht"])."<hr>"; // Keine Einträge gefunden, Fehlerausgabe else echo "Keine Einträge!";?> schreibe_nachricht.php <?php // Diese Datei schreibt den übergebenen Eintrag in die Tabelle // Herstellen der DB-Verbindung $db_handler=mysql_connect(<host>, <User>, <Password>) if ($db_handler) mysql_select_db("chat", $db_handler); // Speichern des Eintrags mysql_query( "INSERT INTO chat_nachrichten (nachricht, zeitpunkt) VALUES ('".$_REQUEST["neue_nachricht"]."', '".date("y-m-d H:i:s")."')", $db_handler);?> AJAX Stand: Seite 7

8 Programmablauf: 1. Der Benutzer ruft die Datei ajax_chat.html auf. Er sieht nur eine leere Box (wo später die Nachrichten erscheinen sollen), ein Eingabefeld für eigene Nachrichten und einen Absenden-Schalter 2. Der Browser lädt die in ajax_chat.html referenzierte JavaScript-Datei ajax_chat.js hinzu. Diese hat einen Hauptprogrammteil, der sofort ausgeführt wird: Initialisieren des XMLHttpRequest-Objektes und Ausführen der Funktion hole_nachrichten() alle drei Sekunden, so lange der Benutzer auf der Website ist oder die Verbindung getrennt wird! 3. Nach drei Sekunden wird die Funktion hole_nachrichten() das erste Mal aufgerufen. Sie stellt eine Verbindung zum Server her und öffnet die Datei lese_nachrichten.php. 4. Die Datei lese_nachrichten.php sucht in der Datenbank neue Einträge und gibt sie an das JavaScript zurück. 5. Wenn der Request abgeschlossen ist, wird die Funktion zeige_nachrichten() aufgerufen, die die übermittelten Daten auf der Internet-Seite anzeigt. Jetzt sieht der Benutzer zum ersten Mal die schon vorhandenen Chat-Einträge. 6. Die Schritte 3 bis 5 wiederholen sich unentwegt! 7. Der Benutzer schreibt einen Text in das Formularfeld und drückt den Schalter absenden. 8. Da im Formular-Tag das Ereignis OnSubmit steht, wird die dort genannte JavaScrip- Funktion sende_nachricht() aufgerufen. 9. sende_nachricht() stellt eine Verbindung zum Server her, öffnet die Datei schreibe_nachricht.php und übergibt ihr den Text, den der Benutzer eingegeben hat. 10. Die Datei schreibe_nachricht.php schreibt den übergebenen Text in die Datenbank. Sie hat keine Ausgabe! Damit ist der Request abgeschlossen. 11. In der Formular-Definition steht hinter dem OnSubmit-Event return false. D.h. das Absenden des Formulars wird von JavaScript immer abgelehnt und die Übermittlung unterbunden! Sonst würde bei jedem Betätigen des Schalters die Datei ajax_chat.html neu aufgebaut, was ja gerade nicht passieren soll! 12. Nach spätestens 3 Sekunden wird die Funktion hole_nachrichten() wieder aufgerufen, und der Benutzer sieht alle neuen Einträge also auch seinen. ACHTUNG: Es handelt sich bei diesem Skript um ein sehr einfach gehaltenes Beispiel! Es werden bei weitem nicht alle Fehlerfälle abgefangen (z.b. Verlust der Verbindung zum Server, Mitteilung an den Benutzer, wenn sein Browser kein XMLHttpRequestObjekt unterstützt etc.) und vor allem werden die vom Benutzer eingegebenen Daten ohne jede Prüfung direkt in die Datenbank geschrieben! Das ist ein extrem hohes Sicherheitsrisiko, da der Benutzer bei geschickter Eingabe die Datenbank zerstören oder sogar die Kontrolle über den Webserver übernehmen könnte (SQL-Injection). AJAX Stand: Seite 8

9 Bewertung der Möglichkeiten von AJAX AJAX hat fraglos viele Vorteile, ermöglicht es dem Benutzer doch einen flüssigeren Umgang mit dem Internet. Allerdings birgt AJAX auch noch viele Probleme und Risiken, die wohl erst in vielen Jahren endgültig in den Griff zu kriegen sind: AJAX erfordert unbedingt JavaScript! Das ist aber bei vielen Benutzern ausgeschaltet. Wenn AJAX also nicht unbedingt notwendig ist, sollte darauf verzichtet werden oder zumindest eine alternative Zugangsmöglichkeit angeboten werden. AJAX-Anwendungen werden clientseitig ausgeführt. D.h. es existieren alle Probleme der clientseitigen Programmierung wie Betriebssystem- und Browserabhängigkeiten, inkompatible Implementierungen und Leistungsfähigkeit der Endgeräte (insb. Handy, PDA) AJAX-Anwendungen sind nicht barrierefrei, da immer nur Teile der Inhalte übermittelt werden! Wenn eine Barrierefreiheit gefordert ist, müssen daher alternative Zugangsmöglichkeiten geschaffen werden (die nach den Forderungen der Barrierefreiheit nicht erlaubt sind!) Bei AJAX-Anwendungen funktioniert der Zurück-Knopf der Browser nicht, da dieser nur die echten, durch Benutzer initiierten Requests abspeichert. D.h. der Benutzer kann nicht wie gewohnt durch die Seite navigieren. Bei AJAX-Anwendungen funktionieren Lesezeichen nicht, da sich auch diese nur die Hauptdatei merken und nicht den aktuellen Status der Ansicht. AJAX-Anwendungen stellen ganz andere Anforderungen an die Vermittlungsstrukturen des Internets: In den letzten Jahren wurde immer mehr Bandbreite geschaffen, um große Datenmengen schnell befördern zu können. Die Reaktionszeit für den Verbindungsaufbau (Latenzzeit) war gegenüber der eigentlichen Datenübertragung weitgehend vernachlässigbar (Ausnahmen sind z.b. Online Spiele). AJAX-Daten sind i.d.r. aber sehr klein, dafür ist ein sehr schneller Verbindungsaufbau notwendig (Stichwort FastPath). AJAX-Anwendungen belasten Webserver um ein Vielfaches gegenüber normalen Internet-Anwendungen, da ein Seitenaufruf nicht mehr einen einzigen, sondern eventuell hunderte Requests auslösen kann (siehe z.b. Google Suggest) AJAX-Inhalte werden nicht von Suchmaschinen erfasst, da diese nur den HTML-Teil der Hauptdateien auswerten und keine verschiedenen Zustände wie Benutzer herbeiführen können. Beispiele für AJAX-Anwendungen: Echtzeit-Suchergebnisse bei Google-Suggest : Interaktive Landkarte Google-Maps: Desktopähnliche Bildbearbeitung im Web: AJAX Stand: Seite 9