JavaScript & Ajax (Bestandteil des Web 2.0)

Ajax (die Kurzform von Asynchronous JavaScript and XML) ist ein Verfahren zur asynchronen Datenübertragung. Dabei wird zur Erlangung des Datenmaterials – im Gegensatz zu konventionellen Methoden – nicht die ganze Seite neu geladen, sondern lediglich die zur Darstellung benötigten Daten nachgeladen. Die auf diese Weise ermittelten Daten werden mit Hilfe von JavaScript in das bereits im Browserfenster befindliche HTML-Dokument integriert.

Dazu bedient man sich den durch das Document Object Model (DOM) gegebenen Möglichkeiten, Seiteninhalte dynamisch anzupassen. Mit Hilfe dieser Technologie lassen sich einzelne Bestandteile einer Internetseite oder zur individuellen Darstellung bestimmte Nutzdaten einer Internetseite bei Bedarf nachladen. Der Begriff Ajax wurde Anfang 2005 durch einen Artikel von Jesse James Garrett eingeführt. Entsprechende Ajax-Anwendungsbeispiele mit kommentiertem Quellcode finden Sie auf den Folgeseiten.

Neu war das hinter Ajax stehende Konzept zum Zeitpunkt der Begriffsfindung allerdings nicht mehr. Die zugrundeliegenden Technologien waren bereits Ende der 1990er Jahre vorhanden. Als elementarer Bestandteil des Web 2.0 getauften „neuen Internet” erlangte Ajax in den letzten Jahren in erheblichem Maße an Bedeutung. Die Interaktion mit dem Benutzer wird durch Verwendung von Ajax erheblich beschleunigt. Dadurch „fühlt” sich eine mit Ajax implementierte Webanwendung eher wie eine lokale Anwendung als wie ein Webservice an.

Auch wird die zu übertragende Datenmenge deutlich reduziert, was zu einer Entlastung der zur Verfügung stehenden Übertragungswege des Internet führt – bestehende Bandbreite wird optimal ausgenutzt. Im Gegensatz zu anderen Verfahren werden keine zusätzlichen Browser-Plugins benötigt, wodurch die Hürden zur Nutzung dynamischer Dienste äußerst gering gehalten werden.

Basis einer jeden Ajax-Anwendung ist das XMLHttpRequest-Objekt. Dieses Objekt ist Dreh- und Angelpunkt bei der ansynchronen Kommunikation des Browsers mit dem Webserver. Mittels XMLHttpRequest-Objekt werden einzelne HTTP-Anfragen an den Webserver gerichtet, wobei Parameter – auf die selbe Art und Weise, wie bei „normalen” dynamisch erzeugten Internetseiten – entweder per Get oder per Post übertragen werden. Als Antwort liefert der Webserver allerdings in den meisten Fällen nicht die üblichen (X)HTML-Dateien, sondern lediglich Nutzdaten, die dann per JavaScript (DHTML) in die bereits dargestellte Seite integriert werden.

Die gelieferten Nutzdaten werden meist in Form von XML-Dateien vom Server verschickt. Aber auch die Übertragung der Nutzdaten als normale Textdateien ist möglich. Das XML-Format hat allerdings den Vorteil, dass die in JavaScript bereits integrierten Methoden zum Umgang mit Daten in XML-Struktur enthalten sind. So können beispielsweise die Methoden getElementsByTagName, getAttributeNode und getAttribute des Node-Objekts verwendet werden, um auf die Elemente und Attribute einer XML-Datei zuzugreifen. Eine Textdatei muss dagegen manuell per JavaScript „auseinandergepflückt” werden, bevor die Nutzdaten in das HTML-Dokument integriert werden können.

Wann ein Ajax-Request abgesetzt wird hängt davon ab, inwiefern Informationen vorliegen müssen, die bei der Anfrage an den Server gesendet werden müssen. Die nötigen Daten können beispielsweise in einem Formular, welches zuvor ausgefüllt werden muss, eingetragen werden. Bestätigt der Benutzer diese Eingabe, so wird der Request samt Parameter an den Server gesendet. Auch werden verschiedene Events genutzt um das Senden einer Ajax-Anfrage einzuleiten. Werden keine weiteren Informationen zur parametrisierung einer Anfrage benötigt, so kann das onLoad-Event verwendet werden, welches automatisch nach Laden der Seite ausgelöst wird. Mit dem onClick-Event kann eine Ajax-Abfrage gestartet werden, wenn der Benutzer auf ein bestimmtes HTML-Element geklickt hat. Welche Variante zur Anwendung kommt, hängt dabei stets vom Anwendungsfall und dem zu modellierenden Prozess ab.

weiter zu Seite 2 3 4 5 »