Blue Flower

Um was geht es auf der Seite?

Die Seite hat als Kern AJAX  (Asynchronous JavaScript and XML) zum Thema. Dazu gibt es Verweise auf Quellen, Informationen, Bücher, Videos & mehr.

Was ist AJAX?

AJAX ist ein Modebegriff. Und Mode ist vergänglich. Derzeit ist die Mode an AJAX vorbeigezogen. Oder anders ausgedrückt - der Begriff AJAX in dem Sinn, wie er auf der Webseite im Fokus steht, ist ziemlich out. Das war nicht immer so. Um das Jahr 2005 und die folgenden Jahre war AJAX hipp. Ein Buzzword, mit dem sich viele Leute und Techniken geschmückt hatten. Aber das ist wie gesagt vorbei. Ist AJAX als Technik damit out? Nein. Nein und noch einmal NEIN. Das Gegenteil ist der Fall. AJAX als Technik ist der Kern des Web 2.0 und eigentlich aller RIAs und einfach so selbstverständlich geworden, dass man darüber nicht mehr reden muss. Oder müssen Sie jeden Tag erwähnen, dass Sie die Luft zum Leben brauchen? AJAX ist für das Web nicht wichtig - AJAX ist für das Web LEBENSNOTWENDIG.


 

Kaum eine Entwicklung hat seit dem ersten Hype bei der Einführung von clientseitiger Webprogrammierung die Bedeutung von JavaScript wieder dermaßen in den Blickpunkt der Öffentlichkeit gebracht, wie die Marketingbegriffe Web 2.0 und AJAX. Und kaum eine Entwicklung vorher hat das World Wide Web so effektiv weiter gebracht. Wobei  weder das Web 2.0 und schon gar nicht das Web 3.0 klar technisch definiert werden können. Die beiden Schlagworte beschreiben mehr eine Art des Umgangs mit dem WWW.  Der reine Marketingbegriff Web 2.0 wurde um das Jahr 2004 durch den O'Reilly-Verlag im Rahmen einer Konferenzreihe geprägt, um damit eine Anzahl neuer interaktiver Techniken und Dienste des WWW zusammenfassen zu können. Insbesondere sollte damit bei solchen Diensten und Techniken der Tatsache Rechnung getragen werden, dass die Teilnehmer dort eine geänderte Wahrnehmung und Anwendung des Mediums Internet haben. Statt passiv zu konsumieren, fasst man unter den zum Web 2.0 gefassten Diensten die Teile des Internets zusammen, bei denen Konsumenten gleichzeitig auch Produzenten von Inhalten sind. Teilnehmer können im Web 2.0 also aktiv werden. Und das ohne die Erstellung einer Webseite im klassischen Sinn. Man redet deshalb beim Web 2.0 auch vom "Mit-Mach-Web". So eine Konstellation trifft man in Wikis, in Blogs, in File-Sharing-Portalen, sozialen Netzwerken und ähnlichen Diensten. So gesehen kann man aber auch bereits einfache Webforen und Gästebücher zum Web 2.0 zählen, was sicher deutlich macht, wie vage der Begriff wirklich ist und wie schwer eine Abgrenzung vom klassischen World Wide Web fallen muss. Das Web 3.0 soll hingegen die immer mehr semantische Entwicklung des WWW zu beschreiben, um die Intelligenz im Web, in Daten, in Metadaten und ähnlichem zu erhöhen und das Web der menschlichen Intelligenz anzunähern.


 

 AJAX als technische Basis des Web 2.0

Ein zentraler Aspekt vieler Angebote, die in engeren Sinn zum Web 2.0 gezählt werden ist jedoch, dass in vielen Fällen als technische Basis AJAX fungiert. Wobei wir gleich ausführen werden, dass auch AJAX im Grunde auch nur ein reiner Marketingbegriff ist, den es wei gesagt seit etwa 2005 gibt. AJAX bezeichnet einfach nur den Zusammenschluss etablierter Technologien. Beginnend bei HTML bzw. XHTML und HTTP über JavaScript und CSS bis hin zu XML und - etwas später hinzugenommen - JSON. Dazu kommt die Möglichkeit der asynchronen Nachforderung von Daten, die in eine Webseite integriert werden sollen.

Wie die ausgeschriebene Form Asynchronous JavaScript and XML schon deutlich wird, handelt es sich bei AJAX also im Kern um eine Erweiterung von JavaScript. Mit AJAX ist es möglich, auch im Internet interaktive Webseiten zu erstellen, die im günstigsten Fall ein Antwortverhalten zeigen, wie es die Anwender von ihren Desktop-Applikationen gewohnt sind. Teile der Webseite können durch neue Informationen ausgetauscht und ergänzt werden, ohne das träge Antwortverhalten bisheriger Web-Applikationen und die Unterbrechung der Anwenderaktivität in Kauf nehmen zu müssen. Und es ist mit AJAX viel leichter als bisher möglich, dass ein Anwender seinen eigenen Beitrag zu der weltweiten Sammlung an Informationen und Wissen leistet und eine Webseite nach seinen eigenen Bedürfnissen anpasst.

Aber wie gesagt - AJAX beschreibt im Grunde nicht viel mehr als die Möglichkeit mit JavaScript über ein neues Kommunikationsobjekt neue Daten für eine nachzufordern und diese darin einzubauen, ohne die Webseite komplett neu laden zu müssen. Vereinfacht gesagt werden Daten bei der Verwendung von AJAX also erst dann angefordert, wenn sie benötigt werden, dann für JavaScript verfügbar gemacht und anschließend mit DHTML in die bereits in den Browser geladene Webseite eingebaut. Dabei wird in vielen Fällen die normale Interaktion des Benutzers mit der Webanwendung nicht durch ein Laden einer neuen Seite unterbrochen. Vergegenwärtigen Sie sich nun noch einmal, dass das A in AJAX für asynchron seht. Die Kommunikation zwischen Browser und Server, die der Benutzer wahrnimmt, ist nur die, die durch seine Aktionen ausgelöst wird. Zum Beispiel sein Anklicken eines Hyperlinks oder das Versenden von Formulardaten. Die offensichtlichen Schritte der Kommunikation zwischen Client und Server gibt der Benutzer vor. Bei der konventionellen Webprogrammierung kommunizieren Browser und Server sonst normalerweise auch nicht weiter.

Bei AJAX ist das anders. Unabhängig von einer offensichtlichen Benutzeraktion können der Browser und der Webserver weitere Nachrichten austauschen. Eben asynchron zum Verhalten der Webapplikation an der Oberfläche. Ein Skript, das auf Grund eines gewissen Ereignisses aufgerufen wird, kann zum Beispiel eine Kommunikation außerhalb des Benutzertaktes auslösen. Dies kann und wird im Extremfall so weit führen, dass ein Anwender in einem Webformular über ein Listenfeld ein Zeichen auf der Tastatur eingibt und direkt nach Eingabe des Zeichens bereits eine ergänzende Information vom Server nachgeladen wird. So etwas kennen Anwender bereits von vielen Desktop-Anwendungen mit Suchfunktionen. Aber im Web ist diese komfortable Unterstützung des Anwenders bisher daran gescheitert, dass immer eine vollständige Webseite ausgetauscht werden musste.

Allgemein wird ein Server auf jede Anfrage dieser Art mit Daten antworten, die dann im Client via JavaScript  zur Verfügung stehen. AJAX-Anwendungen können dabei in allen konformen Webbrowsern ausgeführt werden, wobei in der Regel die meiste Programmlogik oder der Prozessfluss der Anwendung zum Generieren der Daten auf dem Server bleibt. Diese serverseitige Geschäftslogik kann beliebig komplex werden, aber die konkrete Umsetzung ist nicht vorgegeben. AJAX fordert zwar im Client bestimmte Techniken, jedoch – wie schon erwähnt - keine explizit einzuhaltenden Voraussetzungen auf dem Webserver. Hier kommen dann weitgehend beliebige serverseitige Techniken wie PHP, Java Servlets und Java Server Pages oder ASP.NET-Komponenten zum Einsatz.

Das ist sicher ein Schlüssel zum Erfolg von AJAX, da auf Serverseite keinerlei Erweiterungen oder Umstellungen erfolgen. Nur müssen Daten so zum Client geschickt werden, dass dieser damit etwas anfangen kann.

Richtig populär begannen AJAX und das Web 2.0 als Begriffe im Jahr 2005 zu werden. Das lag sicher nicht zuletzt daran, dass Google das mit AJAX sehr griffig zusammengefasste Verfahren für einige bekannte Anwendungen wie beispielsweise Google Groups, Google Maps, Gmail und Google Suggest verwendet und auch den Begriff selbst übernommen hat. Google hat sich unzweifelhaft als die (!!) treibende Kraft hinter AJAX und dem Web 2.0 erwiesen. Und wenn Google auf eine Technik setzt, lohnt sich ein Hinsehen nach der Meinung vieler Leute immer. Deshalb gab es schnell ein riesiges Interesse an AJAX. Und dies wiederum erzeugte den Druck, AJAX-Unterstützung in alle modernen Webbrowser zu integrieren.

 


Der grundsätzliche Ablauf einer AJAX-Anfrage und das XMLHttpRequest-Objekt (XHR)

Wenn Sie AJAX einsetzen, wollen sie in jedem Fall einen Teil einer bereits geladenen Webseite austauschen oder dort Daten ergänzen, ohne die gesamte Webseite wieder neu zu laden. Dies bedeutet, Sie fordern nicht auf konventionelle Weise über den Browser Daten vom Server neu an, sondern Sie kommunizieren quasi am Browser vorbei mit dem Server. Dies hat die Konsequenz, dass die bereits geladene Webseite im Browser erhalten bleibt und die Antwort des Servers mit DHTML-Mitteln in die Webseite eingefügt wird. Sie werden eine hohe Ähnlichkeit zu den Verfahren erkennen, bei denen wir versteckte IFrames als Datenspeicher verwendet haben.

Der grundsätzliche Ablauf

Der Ablauf einer AJAX-Anfrage folgt dabei in der Regel immer dem gleichen Schema:

·       Zuerst wird ein Objekt erzeugt, über das die Kommunikation am Browser vorbei mit dem Server erfolgen wird. In der Regel asynchron zur eigentlichen bewussten Kommunikation des Anwenders mit dem Server. Dieses neue Kommunikationsobjekt ist eine Erweiterung des Objektmodells von JavaScript.

·       Eine Callback-Funktion wird bei diesem Kommunikationsobjekt über einen Eventhandler als Funktionsreferenz registriert oder eine anonyme Funktion notiert. Diese Funktion wird dann bei jeder Zustandsänderung der Transaktion aufgerufen. Die angegebene Funktion wird nach der Registrierung für jede Statusänderung des Kommunikationsobjekts aufgerufen. Eine Eigenschaft des Kommunikationsobjekts gibt dabei Aufschluss über den aktuellen Status der Transaktion beim Aufruf dieser Callback-Funktion. So lassen sich einzelne Phasen der Datenübertragung unterscheiden.

·       Die Verbindung wird geöffnet. Das ist aber noch nicht die konkrete Anfrage. Deshalb ist es auch unerheblich, ob Schritt 2 und 3 vertauscht werden.

·       Die Anfrage wird abgeschickt und die AJAX-Applikation wartet auf die Antwort vom Webserver.

·       Die Antwort des Webservers wird im Browser verwertet. Um eine vollständige Antwort zu erkennen, kann die Statusänderung des Kommunikationsobjekts explizit genutzt werden.

Bei AJAX steht damit ein Kommunikationsobjekt im Mittelpunkt. Alle modernen Browser bieten mittlerweile zur Unterstützung dieser asynchronen Kommunikation zwischen Client und Webserver mit dem als Erweiterung des JavaScript-Objektmodells aufgenommenen Objekt XMLHttpRequest eine eingebaute Schnittstelle zur Kontrolle von HTTP-Transaktionen aus clientseitigen Programmiersprachen (hauptsächlich JavaScript), die unabhängig von der "normalen" Datenanforderung des Webbrowsers ablaufen. Diese XHR- bzw. XMLHttpRequest-Objekte sind damit unmittelbar an dem internen Aufbau von HTTP orientiert und das Rückgrat jeder AJAX-Anfrage.


 

 Ein XMLHttpRequest-Objekt erzeugen

Um mit einem XHR-Objekt arbeiten zu können, muss dieses entsprechend der Regel der eingesetzten Programmiersprache erzeugt werden. Dies erfolgt in JavaScript bekanntlich über den Einsatz einer passenden Konstruktormethode. Ein Objekt vom Typ XMLHttpRequest stellt dann alle relevanten Methoden und Eigenschaften zur asynchronen Kommunikation per AJAX bereit. Dabei können auf Basis der üblichen Übertragungsmethoden Daten verschickt bzw. Informationen angefordert und Antworten empfangen sowie der Request-Header gesetzt und ausgewertet werden.

Beachten Sie, dass mit AJAX-Anfragen aus Sicherheitsgründen in der Regel nur Daten von der gleichen Domain angefordert werden dürfen, von der die anfordernde Webseite stammt. Das ist ein oft zu findendes Sandkastenprinzip (Sandbox), das wir beim Thema Sicherheit auch schon berührt haben (Same Origin Policy). Andernfalls würde man einen so genannten Cross-Domain-Zugriff durchführen und dieser würde Missbrauch und Manipulation Tür und Tor öffnen. Allerdings ist die Einschränkung erheblich und sowohl Webdesigner als auch Browserhersteller tüfteln an Lösungen, diese Beschränkungen aufzuheben ohne die Sicherheit zu gefährden.

Nun erzwingen die verschiedenen Browserinkompatibilitäten, dass man das XHR-Objekt auf verschiedene Arten erzeugen muss, damit das Verfahren in allen relevanten Browsern funktioniert. Die Grundvorgehensweise sieht so aus:

resObjekt = new XMLHttpRequest();

Damit kommen ältere Versionen des Internet Explorers aber nicht zurecht. Sie erzwingen eine Erstellung als ActiveX-Control und das auch noch je nach Version des Browsers mit unterschiedlichen Parametern. Deshalb muss man eine automatische Unterscheidung zwischen den verschiedenen Wegen zur Erzeugung des Kommunikationsobjektes programmieren. In der Regel arbeitet man mit dem Konzept der Ausnahmebehandlung. Man versucht einfach das XHR-Objekt zu erzeugen und wenn es schief geht, versucht man einen alternativen Weg. Indem man die Versuche in eine Ausnahmebehandlung integriert, kann das Skript trotz einer fehlgeschlagenen Erzeugung des Objekts stabil weiterlaufen.

 


Die Anforderung von Daten

Wenn wir jetzt mit der beschriebenen Funktion ein XHR-Objekt erzeugen, können wir darüber Daten asynchron zum eigentlichen Nachfordern von Daten durch den Anwender nachladen. In allen Klartextdatenformaten, die bei AJAX möglich bzw sinnvoll sind. Dazu verwendet man wie oben beschrieben die Registrierung einer Callback-Funktion oder einer anonymen Funktion, die bei jeder Änderung des Transaktionszustands ausgewertet wird. Zudem können Sie auf alle Header-Felder von der Anfrage an den Server und der Antwort durch den Server zugreifen.

Ein XHR-Objekt stellt Ihnen alle relevanten Methoden und Eigenschaften bereit, um gezielt Daten nachzufordern und auszuwählen und für einen JavaScript-Zugriff bereitzustellen. Wie Sie diese Daten dann in der Webseite dem Anwender präsentieren, ist dann reines DHTML.


 

 Die Methoden eines XHR-Objekt

Nachfolgend finden Sie die Methoden eines XHR-Objekts, die Sie für den AJAX-Austausch entweder zwingend benötigen oder die teilweise optionale Features bereitstellen:

Methode

Beschreibung

abort()

Der Aufruf der Methode bewirkt den Stopp der aktuellen Server-Anfrage. Genau genommen wird damit nur das Kommunikationsobjekt angewiesen, die Serverantwort zu ignorieren. Wenn die Antwort des Servers nach dem Aufruf der Methode eintrifft, wird sie also nicht in die Applikation eingebaut.

getAllResponseHeaders()

Über den Aufruf der Methoden erhalten Sie als Rückgabe die vom Server gesendeten Header-Felder als String.

getResponseHeader(
"headerLabel")

Die Methode gibt das als Parameter benannte Header-Feld als String zurück.

open("method", "URL"
[, asyncFlag[, "userName"[, "password"]]])

Die open()-Methode ist eine der wichtigsten Methoden eines XHR-Objekts. Sie initialisiert das Kommunikationsobjekt mit den Verbindungsdaten, die für einen Kontakt zum Webserver notwendig sind. Dabei werden mindestens zwei Parameter angegeben. Für method kann GET, POST, PUT oder HEAD verwendet werden, wobei in der Praxis GET oder POST dominieren.

GET überträgt Daten in Form einer Erweiterung des URLs.

POST kommt insbesondere dann zum Einsatz, wenn die gesendeten Daten größer als 500 Bytes sind.

HEAD wird verwendet, wenn nur Response-Header und keine Daten angefordert werden. Dieses kann z.B. verwendet werden, wenn für eine Datei auf dem Server das Datum der letzten Änderung abgefragt werden soll.

PUT wird zum Kopieren von Dateien auf den Server eingesetzt.

Der URL ist der relative oder absolute Pfad zum Serverskript oder der angeforderten Datei, wobei gegebenenfalls ein Querystring angefügt und ein Pseudo-URL verwendet werden kann.

Das dritte Argument gibt an, ob eine Anfrage synchron (false) oder asynchron (true) verarbeitet wird. Sofern eine synchrone Verarbeitung festgelegt wird, wird der folgende Versand der Daten mit der send()-Methode die Ausführung des Skripts solange blockieren, bis die Antwort des Servers vollständig empfangen wurde. In diesem Fall kann die Antwort des Servers im unmittelbar folgenden Schritt des Skripts verarbeitet werden. Diese Synchronisierung bietet sich hauptsächlich dann an, wenn die angeforderten Daten die Grundlage des weiteren Skriptablaufs darstellen (etwa wenn die erste AJAX-Anfrage Informationen aus einer Datenbank abholt, die einer folgenden AJAX-Anfrage mitgegeben werden sollen).

Beim asynchronen Anfordern von Daten wird das blockierende Warten des Browsers auf die Antwort vermieden (das ist auch bei AJAX-Applikationen der Regelfall). Das Skript läuft dann nach dem Absenden des Requests einfach weiter. Wenn Sie so eine Anfrageform wählen, kann die Antwort des Webservers nicht im unmittelbar nächsten Schritt des Skripts verarbeitet werden, da die Antwort wegen der Antwortzeiten der Transaktion so gut wie nie rechtzeitig da sein kann. Stattdessen werden wie gesagt deshalb eine Callback-Funktion oder eine anonyme Funktion definiert, die immer dann aufgerufen wird, wenn sich der Bearbeitungszustand der Transaktion ändert. Dies kann mit einer speziellen Eigenschaft eines XHR-Objekts - onreadystatechange - verfolgt werden.

Der optionale Parameter userName ist ein gegebenenfalls benötigter Benutzername für eine geschützte Ressource auf dem Server und 
password entsprechend das zugehörige Passwort.

send(content)

Die send()-Methode wird zum tatsächlichen Abschicken einer Anfrage verwendet. Sie wird nach dem Aufruf der open()-Methode aufgerufen.

Der Parameter content ist entweder null (bei GET) oder ein Querystring bei POST mit zum Webserver zu übertragenden Daten wie etwa Benutzerdaten.

setRequestHeader("label",
"value")

Mit dieser Methode können individuelle Header-Felder gesetzt werden.

setMimeType("mime-type")

Über diese Methode erfolgt das Setzen des MIME-Typs der angeforderten Daten (Response). Der Parameter mimetype ist die übliche Angabe eines MIME-Typs als String (z.B. "text/xml" oder "text/html"). Achtung: Die Methode wird von einigen Browsern nicht unterstützt (etwa dem Internet Explorer).

In der Praxis benötigen Sie beim Anfordern von XML-Daten auch oft keine explizite Festlegung von XML. Selbst wenn die XML-Daten ohne die Festlegung vom Server gesendet werden, können Sie auf dem XML-Baum navigieren. Die XML-Elemente stehen Ihnen auch dann zur Verfügung, wenn reiner Text oder HTML als MIME-Typ gesendet wird.

 


 

Die Eigenschaften eines XMLHttpRequest-Objekt

Ein XHR-Objekt besitzt neben den beschriebenen Methoden eine Reihe Eigenschaften, die Sie für eine AJAX-Applikation benötigen oder diese optional um einige Möglichkeiten erweitert:

Eigenschaft

Kurzbeschreibung

onreadystatechange

Die Eigenschaft beschreibt einen JavaScript-Eventhandler der jedes Mal aufgerufen wird, wenn sich der Verbindungsstatus (readyState) eines XHR-Objekts ändert.

Man registriert bei diesem Eventhandler in der Regel eine Funktionsreferenz auf eine Callback-Funktion oder notiert hier eine anonyme Funktion.

readyState

Die Eigenschaft enthält den aktuellen Verbindungsstatus einer Transaktion. Mögliche Werte, die an den Standardmeldungen eines Webservers orientiert sind, sind folgende:

0

UNINITIALIZED

Das XHR-Objekt wurde noch nicht initialisiert. Das bedeutet, die Verbindung wurde noch nicht geöffnet beziehungsweise die Methode open() noch nicht aufgerufen.

1

LOADING

Das Request-Objekt wurde erstellt und initialisiert, aber es wurde noch keine Anfrage mit send() gesendet.

2

LOADED

Die Anfrage wurde gesendet und der Antwort-Header sowie der Antwortstatus können ausgewertet werden.

3

INTERACTIVE

Die Daten vom Server treffen gerade ein. Die Eigenschaften responseText bzw. responseXML enthalten die bereits empfangenen Daten.

4

COMPLETED

Die Kommunikation mit dem Server ist abgeschlossen und alle Daten sind angekommen, wenn kein Fehler aufgetreten ist. Dies ist der wichtigste Fall bei der Erstellung von AJAX-Applikationen.

Sie können beispielsweise in einer switch-case- oder einer if-Entscheidung die Statuscodes auswerten und entsprechend Reaktionen implementieren. Aber Achtung: Die Statuscodes außer 4 (COMPLETED) sind in verschiedenen Browsern nicht wirklich einheitlich implementiert. Deshalb macht in der Praxis fast nur die Abfrage auf readyState == 4 Sinn.

responseText

Die Eigenschaft enthält die vom Server gesendeten Daten als Text.

responseXML

Die Eigenschaft enthält die vom Server gesendeten Daten als XML-Daten beziehungsweise DOM (d.h. ein Knotenobjekt vom Typ node). Wenn die Daten nicht in XML-Form (oder allgemein als Baum) gesendet worden sind, enthält responseXML den Wert null.

status

Die Eigenschaft enthält den HTTP-Status der Verbindung als Zahl und korrespondiert unmittelbar mit dem zugehörigen Wert der Serverantwort. Sie können darüber genauer die Antwort des Webservers verwerten als es mit readyState möglich ist. Im Allgemeinen ist diese genauere Verwertung allerdings nicht notwendig.

statusText

Die Eigenschaft enthält den HTTP-Status als Text-Meldung, sofern eine solche übermittelt wurde und korrespondiert unmittelbar mit dem zugehörigen Wert der Serverantwort.