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.

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht