0251 / 590 837 15

Ajax – Tutorial, Tipps & Tricks

Ajax ist derzeit eines der heißesten Themen in Programmiererkreisen. Kaum etwas schafft es derartige Begehrlichkeiten auszulösen: Jeder der etwas auf sich hält setzt irgendwie in irgendeiner Form Ajax auf seiner Seite ein.

Was ist Ajax?

Was ist Ajax eigentlich? Woher der Name Ajax ursprünglich stammt, ist leider nicht mehr übermittelt; mittlerweile wird er jedoch als Akronym für die Worte Asynchronous Javascript and XML, manchmal auch Asynchronous Javascript+ActiveX+XML oder nur Asynchronous Javascript+ActiveX, verwendet. Ähnlich wie bei DHTML handelt es sich dabei also nicht um eine neue Technologie oder Programmiersprache sondern lediglich wiederum um eine Sammlung von Techniken, deren gemeinsamer Einsatz einen neuen Namen bekommen hat.

Aus den Bestandteilen leitet sich dabei recht einfach die Funktionsweise ab: Innerhalb von JavaScript werden asynchron XML-Daten abgefragt. Die Abfrage der Daten geschieht hierbei in der Regel via HTTP mit Hilfe eines speziellen JavaScript-Objekts welches im Mozilla Firefox bereits integriert und in Microsofts Internet Explorer via ActiveX erreichbar ist (deshalb gelegentlich auch die Namensnennung mit ActiveX im Mittelteil). Die abgefragten Daten müssen dabei nicht zwangsläufig XML-Daten sein, da es sich jedoch in der Regel um in irgendeiner Form sinnvoll geordneten Daten handelt, stellt XML hier meist die erste und einfachste Wahl dar.

Wozu Ajax?

Neben der Frage nach der Funktionsweise lässt sich auch die Frage nach dem Nutzen aus den Bestandteilen herleiten: Ajax kann immer dann für Erleichterung einer Anwendung sorgen, wenn es darum geht bestimmte Daten zeitnah aber nachträglich abzurufen. Klassisches Beispiel für solch eine Anwendung ist ein Suchfeld welches während der Eingabe der ersten Buchstaben bereits mögliche Worte und erste Ergebnisse liefert. Zudem kann Ajax z.B. immer dann sinnvoll eingesetzt werden, wenn es darum geht Daten an den Server zu senden, ohne dass dazu ein Neu-Laden der gesamten Webseite notwendig ist. Letztlich vereinfacht Ajax damit die Handhabung einer Anwendung, kann diese um neue Funktionen erweitern und damit leistungsfähiger machen. In den seltensten Fällen ist Ajax selbst dabei die Anwendung - oftmals bildet Ajax hier nur einen kleinen Teil zur Unterstützung einer bereits bestehenden Anwendung.

Klassisches Ajax-Beispiel: Die Live-Suche von Google Suggest
Darstellung: Klassisches Ajax-Beispiel: Die Live-Suche von Google Suggest

Voraussetzungen

Die Nutzung von Ajax ist bei aktuellen Browsern eigentlich kein größeres Problem da sich für quasi alle ein passender Weg finden lässt. Für Microsofts Internet Explorer gilt dies ab der Version 5.0, der Mozilla Firefox "kann" Ajax ab der Version 1.0 und Opera ab 8.0. Clientseitig sind bei den meisten Nutzern damit die Voraussetzungen gegeben.
Da Ajax allerdings nicht nur aus dem Abruf von Daten besteht sondern auch aus den abgerufenen Daten, ist in vielen Fällen neben der clientseitigen Programmierung zudem ein serverseitiger Bestandteil notwendig der die Auswahl der Daten vornimmt und sie so liefert, dass Sie vom Clienten verstanden und verarbeitet werden können. In der Regel übernehmen dies PHP oder ASP(.NET)-Anwendungen, gelegentlich auch JSP oder Python usw. Zudem existieren zahlreiche sogenannte Ajax Frameworks welche ein reibungsloseres Zusammenspiel zwischen Client und Server durch einheitliche Methoden ermöglichen sollen.

Vor- und Nachteile

Die Vorteile von Ajax liegen klar auf der Hand: Bestehende Anwendungen werden durch Ajax teilweise deutlich nutzerfreundlicher, besser verwendbar und schneller. Oftmals ist schon der Faktor, dass die Seite nicht nochmals neu geladen werden muss um bestimmte Zwischenschritte zu erreichen schon von entscheidender Wirkung für eine Anwendung.
Die Nachteile von Ajax liegen gleichwohl im Wesen von Ajax: Als eine von abgerufenen Daten abhängige Technik ist eine Anwendung die Ajax verwendet auf eine ständige Internetanbindung angewiesen die ggf. zudem einer bestimmten Geschwindigkeit entsprechen muss um die geforderten Daten innerhalb einer relevanten Zeitspanne zurück zu liefern. Als zweites Problem kommt die bereits von DHTML bekannte Browserschwäche hinzu, die es erfordert für verschiedene Browser verschiedene Lösungswege bereit zu stellen um möglichst alle Nutzer bedienen zu können.
Zudem stellt in einigen Fällen das Handling der Asynchronität ein gewisses Problem dar. Gerade in Fällen in denen Eingaben eindeutig sein müssen kann es aufgrund von Mehrfachanfragen oder parallelen Abläufen zu Fehlern kommen.

Wie viel Ajax darf es denn sein?

Zu beachten ist, dass nicht alle Benutzer der Website mit JavaScript haben. Dies kann aus verschiedenen Gründen sein: Sie haben es deaktiviert, ihr Browser untersützt es noch, sie Benutzen andere Browser Arten, wie zum Beispiel Screenreader oder noch wichtiger: Suchmaschinen.

Natürlich muss man deswegen Ajax nicht ganz weglassen, aber man sollte die Verwendung einschränken.

Wo sollte Ajax vermieden werden?

  • In den Texten (damit es die Suchmaschinen erkennen)
  • In der Navigation, wenn es unbedingt Ajax seien sollte, muss eine Version ohne Ajax angeboten werden!

Wo kann man Ajax ohne bedenken einsetzen?

  • In bestimmten Hilfsdialogen, wie zum Beispiel Color-Picker
  • In internen Projekten (wo man sicher weiß, dass alle User JavaScript eingeschaltet haben)
  • In Werbeanzeigen (weil es dann nicht so wichtig ist, wenn sie nicht angezeigt werden)

Am besten schalten Sie in ihren Browser JavaScript aus und versuchsen dann mal ein paar Sachen auf deiner Seite zu machen.

Daten abrufen

Der wichtigste Bestandteil einer jeden Ajax-Anwendung ist das Abfragen der Daten. Dies geschieht in der Regel via HTTP wofür JavaScript ein spezielles Objekt, XMLHttpRequest genannt, bereit stellt.

XML und JavaScript

Ist der Request abgeschickt und der Response empfangen geht es daran die bekommenden Daten auszuwerten und entsprechend ihrer Bestimmung zu verarbeiten.

Andere Formen von Ajax

Je nach dem welches Ziel mit dem Einsatz von Ajax-Techniken verfolgt wird kann es sich unter Umständen heraus stellen, dass einzelne Bestandteile zu kompliziert sind bzw. das Ziel mit deutlich einfacheren Mitteln erreicht werden kann. Insbesondere das Auslesen und Verarbeiten der XML-Daten stellt oftmals einen nicht unerheblichen Aufwand im Vergleich zum relativ geringen Nutzen dar.

Ajax-Frameworks

Insbesondere bei größeren Aufgaben können Frameworks die Arbeit deutlich erleichtern. Für nahezu alle Programmiersprachen gibt es entsprechende Frameworks – so auch für Ajax. Die wichtigsten Frameworks für die einzelnen Programmiersprachen wollen wir Ihnen in den folgenden Kapiteln vorstellen.

Sajax

Auch wenn sich der Name Sajax sehr nach dem im vorherigen Kapitel beschriebenen Framework Xajax anhärt, haben beide jedoch wenig miteinander zu tun, sieht man mal davon ab, dass Sie beide Ajax-Frameworks sind. Der Unterschied bei Sajax: Für Sajax existieren Implementationen in quasi allen relevanten Programmiersprachen wie ASP, ColdFusion, Perl oder Python – und selbst an PHP wurde gedacht.

Xajax

Wer serverseitig mit PHP arbeitet und auf Ajax setzen möchte, hat mit Xajax die richtige Wahl getroffen. Xajax übernimmt nicht nur den Abruf der Daten per Ajax sondern verarbeitet diese gleich so, dass Sie ohne weiteres zutun im Client bzw. auf dem Server benutzt werden können. Damit können Daten quasi spielend zwischen Server und Clienten hin und her übertragen werden.

Atlas

Im Vergleich zu den vorher genannten Frameworks fällt das ASP.NET-Framework Atlas völlig aus der Reihe. Hier hat die Automatisierung quasi ihren Höhepunkt erreicht: Einfach Scripte lassen sich fast per Drag&Drop zusammen klicken und der Programmieraufwand wird auf ein Minimum reduziert. Zugleich wird durch den Einsatz von ASP.NET bzw. allgemein Microsoft’s .NET-Framework die Sachlage gleichweg komplizierter da es eben deutlich mehr Möglichkeiten, Elemente und Objekte gibt die eingesetzt werden können und über die man leicht den Überblick verlieren kann. Alles in allem ist Atlas aber DIE Wahl für alle ASP.NET-Programmierer und lässt alle anderen Frameworks in Sachen komfort hinter sich zurück.

Spry und AjaXSLT

Das Spry-Framework ist eine von Adobe zur Verfügung gestellte JavaScript-Bibliothek mit diversen Funktionen die das Leben als Webdesigner um einiges erleichtern können. Dazu gehören zahlreiche Funktionen zur Verarbeitung von XML-Daten, Ajax-Funktionalitäten, Effekte oder Formularbehandlung. Dazu gehört außerdem die Fähigkeit zum Verarbeiten von XSLT-Daten die dem AjaXSLT-Framework entlehnt sind.