AJAX

aus www.iwiki.de, der freien Wissensdatenbank

AJAX (A)asynchron (J) javascript (A) and (X)xml ermöglicht eine im Hintergrund ablaufende asynchrone Datenübertragung zwichen Client und Server, ohne daß der Anwender etwas davon merkt. Die aktuelle Seite wird nicht komplett neu geladen, sondern nur die angeforderten aktuellen Informationen nachgezogen. AJAX ist keine neue Technologie sondern eine Ansammlung und Nutzung von bereits vorhandenen Techniken:

Mit Ajax wird das Ziel verfolgt, das Web noch dynamischer zu machen. Durch die Kombination verschiedener bereits bekannter Techniken, wurde eine völlig neue Art der Webseitenprogrammierung geschaffen. Es können Oberflächen geschaffen werden, die Desktop-Applikationen ähneln. Im Gegensatz zu Desktopanwendungen müssen diese nicht lokal installiert und auch keine Updates eingespielt werden. Somit gewinnt das Internet noch mehr Stärke, da mehr Aufgaben darüber erledigt werden können.

Inhaltsverzeichnis

[bearbeiten]

Geschichte

Es ist nicht mehr genau nachvollziehbar, wer den Begriff Ajax erfunden hat, jedoch wurde der Begriff Anfang 2005 durch Jesse James Garret, Mitarbeiter der Agentur Adaptive Path, in seinem Aufsatz "Ajax: A New Approach to Web Applications" geprägt. Die Techniken (s.o.), die hinter Ajax stehen, waren aber schon vor Veröffentlichung des Aufsatzes bekannt.

Mittlerweile etabliert sich die die Technologie Ajax mehr und mehr(Emerging Technologies Hype Cycle) und es gibt einige Unternehmen, wie beipsielsweise Google, die diese Technik bereits erfolgreich einsetzen.

[bearbeiten]

Funktionsweise

Über AJAX (Asynchronous JavaScript and XML) wird heute viel berichtet und diskutiert. Was verbirgt sich hinter dieser Technik? Zum einen ein Konzept des asynchronen Datenaustauschs zwischen einem Server und einem oder mehreren Clients. Vorteil dieser Technik ist es Informationen nachzuladen, was bisher nur über einen Reload möglich war. Somit muss beim Laden einer Webseite nicht mehr alles geladen werden, sondern es können anforderungsgerecht Daten geladen werden. Dadurch beschleunigen sich vorallem datenlastige Anwendungen und es kann mit weniger Verzögerungen durch das Nachladen von Daten gearbeitet werden

[bearbeiten]

Technik

Microsoft hat seit dem Internet Explorer 5 die Funktionsweise eingebaut, im Hintergrund http-Anfragen abzusetzen und die Rückgaben auszuwerten. Die Anforderung kam damals aus dem Office Team, die diese Funktion benötigten um zu prüfen, ob neue Mails vorhanden sind ohne die gesamte Seite neu zu laden.

Diese Funktionsweise ist ein ActiveX-Control Baustein namens XMLHttpRequest, dass damals noch systemgebunden an den Internet Explorer war. Heutzutage ist dieses Browserobjekt in allen gängigen Browsern bereits integriert.

Die Basis jeder AJAX – Anwendung bildet der XMLHttpRequest, um diesen zu nutzen muß dieser clientseitig im Browser initiert werden.

[bearbeiten]

XMLHttpRequest

Bsp.: ansynchroner XMLHttpRequest

var http = new XMLHttpRequest ();
http.onreadystatechange = handleStateChange;
http.open(´GET’, ´http://welearn.de/’, true);
http.send(null);

Damit wird ein neuer XMLHttpRequest – Objekt angelegt und mit einen GET-Request für Bsp.: http://www.welearn.de initialisiert. Statusänderungen werden in der Funktion onreadystatechange als Callback-Funktion eingetragen Das dritte Argument der Funktion open ´true’ gibt an, daß es sich um einen asynchronen Request handelt.
Nach Ausführen der Funktionen http.open und http.send setzt der Browser mit der Ausführung des Scripts fort, da er nicht auf eine Antwort des Servers zu warten hat.

Die oben angegebene Funktion handleStateChange wird absofort für jede Statusänderung aufgerufen. Die Variable readyState des XMLHttpRequest gibt Auskunft, in welchen Status sich der Request befindet. Das Laden ist dann beendet, wenn der Status COMPLETED (4) erreicht worden ist. Die Statuscodes außer 4 sind in den jeweiligen Browsern verschiedenartig implementiert.

Bsp: Callback-Funktion Statusänderungen

function handleStateChange() {
switch (http.readyState){
case 0: //uninitialized
case 1: // loading
case 2: //loaded
case 3: //interactive
break;
case 4: //completed
handleResponse (http.status, http.responseText);
break;
default: ; //fehlerhafter Status
}
};

Wert Wirkung
0 Das Objekt wurde noch nicht initialisiert, es erfolgte noch kein Aufruf der Funktion open
1 Das Reques-Objekt wurde initialisiert, aber der Request noch nicht abgesetzt
2 Der Request wurde mittels der Funktion send abgesetzt
3 Teile des Request sind schon verfügbar und können über die Variable responseText abgerufen werden
4 Request vollständig abgearbeitet

Das gezeigte Codefragment bildet das Kernstück jeder AJAX – Anwendung. Die einzige Plattformabhänigkeit ergibt sich beim Initialisieren des XMLHttpRequest. Für den Internet Explorer muß demnach eine ActiveX-Objekt erzeugt werden. Glücklicherweise bieten die verschieden AJAX - Frameworks Bibliotheken an die diese Unterschiede berücksichtigen.

[bearbeiten]

HTTP - Transaktion und AJAX

Diese Bilder erklären recht gut die Änderung zwischen dem "alten" Konzept und der Neuerung. So ist ohne Ajax immer eine neue Anfrage an den Server notwendig. Mit Ajax hingegen "unterhält" sich der Server ständig mit der Ajax-Engine. Diese erhält neue Informationen und unabhängig hiervon arbeiten die Benutzerebene mit der Ajax Engine, welche auf der Clientseite läuft, somit auch die Rechenlast hierfür bei den Anwendern anzusiedeln ist.

Der Prozessfluss einer traditionellen Webanwendung. Der Prozessfluss einer Anwendung, wie er sich bei Ajax darstellt.

Um diese Transaktionsgeschwindigkeit zu gewährleiten bleibt für die Dauer der Anfrage der Transportkanal geöffnet. Moderne HTTP-Server und Clients unterstützen dieses Vorgehen. Die Zuordnung der Transaktionen werden per Cookie-Mechanismus oder eindeutige Sessions ermöglicht.

[bearbeiten]

Frameworks

Für Ajax stehen derzeit schon einige Frameworks zur Verfügung, wobei für kleinere Anwendungen keine Frameworks notwendig sind. Diese Frameworks ermöglichen nur eine komfortablere Programmierung, und es müssen bereits vorhandene Funktionen nicht neu entwickelt werden.

[bearbeiten]

Prototype

Prototype bietet Mechanismen zur objektorientierten Programmierung mit JavaScript. So bietet es Funktionen zur DOM-Manipulation, Ajax-Zugriffe sowie die dazugehörigen Effekte. Dies bildet den Grundstock für viele andere Frameworks und Weiterentwicklungen, wie beispielsweise Script.aculos.us und moo.fx.

[bearbeiten]

Script.aculo.us

Script.aculo.us ist eine sehr mächtige Bibliothek mit vielen Möglichkeiten. So bietet sie unter anderem ein Animations Framework, drag and drop, Ajax-gestütze Kontrollelemente und einige weitere Einsatzmöglichkeiten. Das Ziel dieses Frameworks ist "to make your web sites and web applications fly". Somit ist das Ziel klar definiert, es soll dem Anwendungsentwickler den bisherigen Horizont an ihm zur Verfügung stehenden Möglichkeiten erweiteren. Natürlich verfolgen Unternehmen, welche diese neuen Chancen einsetzen, das Ziel dem Kunden die Nutzung des Internetauftritts zu verschönern oder zu vereinfachen, aber ihn auch möglichst lange zu binden.

[bearbeiten]

moo.fx

Moo.fx ermöglicht es grafische Aspekte von Ajax zu nutzen, beispielsweise Bereiche einer Webseite nur auf Wunsch des Anwenders einzublenden. Die Art der Einblendung sowie andere Parameter sind frei einstellbar. Der größte Vorteil von moo.fx dürfte die extrem kleine Größe sein, denn es ist nur 3kB groß.

[bearbeiten]

Google Web Toolkit

Das Google Web Toolkit ist eine Besonderheit, da es dem Entwickler ermöglicht Webanwendungen in JAVA zu programmieren. Dieses Framework ist laut Google gedacht für Programmierer, "who don't speak browser quirks as a second language". Des Weiteren kann es genutzt werden, um bereits bestehende Desktopanwendungen recht schnell und einfach in Webanwendungen zu portieren. Bei diesem Vorgehen kann die Logik hinter der Weboberfläche gleich bleiben. Um dies aber schnell und einfach realisieren zu können, muss die Oberfläche klar und strikt von den unteren Logikebenen getrennt werden. Denn nur so kann die in JAVA meist genutze SWING Oberfläche gegen das Google Web Toolkit ausgetauscht werden. Dies würde für Unternehmen bedeuten, dass alle bisher unter JAVA entwickelten Softwarelösungen relativ leicht in Webanwendungen umgewandelt werden können, und somit nicht die gesamte Logik erneut programmiert werden muss. Außerdem wäre es denkbar beide Versionen anzubieten, wobei sich dann der Wartungsaufwand minimieren würde, da die unteren Schichten der Software nur einmal gepflegt werden müssten. Ein weiterer Grund für eine Wandlung von der normalen JAVA Desktopanwendung zu einer im Internet verfügbaren, ist die Vereinfachung neuer Releases, denn sie müssten nur an einer Stelle eingespielt werden und würden automatisch für alle Kunden bereit stehen.

Auf Basis des Google Web Toolkits entstanden Anwendungen, wie Google Mail oder Google Maps.

[bearbeiten]

Vor- und Nachteile

Ajax bietet einige bedeutende Vorteile, welche die Bedienung des Internets erleichtern. Es gibt jedoch auch viele Elemente, die durch die Verwendung von Ajax nicht mehr gewährleistet sind.

[bearbeiten]

Vorteile

  • Ajax-Technologie ist frei zugänglich und unabhängig vom Betriebssystem.
  • Es ist kein Browser-Plugin nötig.
  • Seite muss bei Veränderung der Daten nicht komplett neu geladen werden.
  • Der Benutzer kann ohne auf den Aufbau der Seite zu warten, mit den verfügbaren Inhalten weiter arbeiten.
[bearbeiten]

Nachteile

  • JavaScript muss aktiviert sein.
  • Funktionen, wie "Tabbed browsing", "Zurück-Knopf" und "Bookmarking" können verloren gehen.
  • Unterstützung von Suchmaschinen - je interaktiver, desto schwieriger die automatisierte Erfassung der Inhalte
  • Ohne JavaScript ist keine Barrierefreiheit realisierbar.
  • Web-Oberfläche könnte für Benutzer unbedienbar werden, da die Elemente nicht mehr wie gewohnt funktionieren, z.B. kein Submit-Button oder durch Drag and Drop.
  • Die Druckfunktion des Browsers druckt die Seite, wie sie ursprünglich vom Server geladen wurde. Die Änderungen oder Eingaben danach werden nicht gedruckt.
  • Bei Navigationselementen wie Menüs wird eine schnelle Reaktion erwartet.
  • Umfangreiche Tests in verschiedenen Browsern erforderlich.
  • Nutzer von mobilen Endgeräten sollten auch berücksichtigt werden.
[bearbeiten]

Anwendungsbeispiele

[bearbeiten]

Google

Google Logo
vergrößern
Google Logo

Google hat, als eines der ersten Unternehmen, Ajax erfolgreich in seine Webanwendungen integriert. Erst durch diese Integration bekam Ajax einen neuen Aufschwung und immer mehr haben sich an diese Technik heran getraut. Folgende Google-Anwendungen werden oft als Beispiele für Ajax-Anwendungen genannt.

[bearbeiten]

Google Suggest

Google Suggest ist eine Variante des bekannten Google Suchdienstes mit einem neuen Interaktionsmodell. Bei Eingabe eines Suchbegriffs liefert die Anwendung bereits mögliche Schlagwörter und Kombinationen, inklusive der Anzahl der Treffer dazu in der Google Datenbank. An diesem Beispiel ist gut zu erkennen, wie Ajax-basierte Anwendungen im Hintergrund mit dem Server kommunizieren. Der Nutzer kann in dieser Zeit mit bereits vorhandenen Informationen arbeiten oder neue Eingaben machen.

[bearbeiten]

Google Maps

Google Maps bietet Kartendaten und Satellitenbilder an. Hier werden die einzelnen Kacheln einer Karte im Hintergrund vom Server nachgeladen, ohne dass der Benutzer auf den Aufbau der kompletten Seite warten muss. Er kann in der Zwischenzeit mit der linken Navigation arbeiten. Klassische Kartenanwendungen haben lange Wartezeiten bis die Seite aufgebaut ist. Google Maps hingegen hat für die großen Datenmengen, die vom Server zum Browser übertragen werden müssen, eine relativ kurze Wartezeit.

An diesem Beispiel ist eine Haupteigenschaft von Ajax gut zu erkennen. Der asynchrone Seitenaufbau ermöglicht, dass nicht die gesamte Seite neu geladen wird, sondern nur punktuell an den Stellen, an denen Änderungen vorgenommen wurden. Beispielsweise ist die Karte mit der Maus verschiebbar. Hieran ist gut erkennbar, dass noch nicht sichtbare Kartenteile im Hintergrund nachgeladen werden. Sobald diese in den sichtbaren Bereich kommen, sind sie schon vom Server geladen.

[bearbeiten]

Google Mail

Google Mail ist der Webmailer von Google. Eine eigene Mail-Adresse für diese Beta-Version zu bekommen ist derzeit nur durch eine Einladung eines angemeldeten Mitglieds möglich. Dieser Webmailer ist ein gutes Beispiel für eine Webanwendung, die sich wie eine Desktopanwendung verhält. Hier wurden Funktionen wie beispielsweise das Zuordnen von Mails zu Konversationen und ein Chat verwirklicht. Außerdem werden bei der Eingabe einer E-Mail Adresse Vorschläge von Adressen aus der Kontaktliste gegeben, welches auch eine Eigenschaft von Ajax ist.

[bearbeiten]

Google Docs & Spreadsheets

Google Docs & Spreadsheets ist eine Textverarbeitungs- und Tabellenkalkulationsanwendung, welche keine Desktopanwendung sondern eine Webanwendung ist. Sie weisst aber einen Teil der Funktionen auf, die auch unter Word oder Excel zu finden sind. Ein großer Vorteil dieser Webanwendung ist, dass ein gleichzeitiges Arbeiten mehrerer Personen an einem Dokument möglich ist, ohne dass dabei Daten verloren gehen.

[bearbeiten]

Fazit

Die Ajax Technologie hält derzeit sehr stark Einzug in die verschiedensten Bereiche des Internets, da es die Möglichkeit eröffnet, Webanwendungen ähnlich komfortabel zu gestalten wie Desktopanwendungen. Das heisst, der Anwender bekommt sofort ein Feedback auf seine Interaktionen. Des Weiteren bietet sie aber den Vorteil der Aktualität des Internets und ermöglicht ganz neue Formen des World Wide Webs. So wurden durch Ajax Ideen möglich, die früher nur schwer oder gar nicht realisierbar gewesen wären.

Einige dieser Beispiele haben wir genauer beleuchtet, aber es entstehen täglich neue. Einen guten Überblick bietet Ajaxian.com.

So werden wohl in Zukunft immer mehr Unternehmen beispielsweise bei der Überprüfung von Formulardaten die Möglichkeit der Kontrolle vor dem Absenden durch den Nutzer realisieren. Denkbar wäre eine Fehlermeldung, dass die eingebene Straße nicht im eingegebenen Postleitzahlengebiet liegt.

[bearbeiten]

Weblinks

Von "http://www.iwiki.de/wiki/index.php/AJAX"