Vortrag AJAX

Aus GNU/Linux User Group Kaiserslautern

Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[bearbeiten] Zusätzliche Informationen

[bearbeiten] Einführende Worte

Eine Vielzahl von Webanwendungen wie YouTube, flickr, Google Maps, Google Text-und-Tabellen etc. benutzen die Ajax-Technologie um dynamische Webanwendungen bereit zu stellen. Diese Unterscheiden sich von herkömmlichen Webseiten dadurch, daß sie eben nicht statisch sind, sondern nach Bedarf Informationen vom Server holen und die Seite dynamisch anpassen. Statische Seiten müssen bei jedem Klick, bei jeder Änderung von Zuständen der Seite die Seite vom Webserver neu anfordern. Die Seite wird dadurch jedes Mal neu aufgebaut. Ajax ist ein Apronym für die Wortfolge Asynchronous JavaScript and XML und ist wesentlicher Bestandteil des Web 2.0 wie es in der Presse und Fachwelt genannt wird.

[bearbeiten] Erläuterungen zum Beipiel

Das Beispiel aus dem Vortrag, daß weiter unten zum Download bereit steht, stellt eine ganz einfach Ajax-Anwendung vor. Die Datei index.html stellt die Seite da, die der Benutzer in seinem Browser angezeigt bekommt. Es wird eine einfache Textbox angezeigt. Gibt man dort einen Text ein und drückt den Knopf setText wird dieser Text per JavaScript und dem XMLHttpRequest Objekt an ein weiteres Script geschickt. Dieses Script ist in dem Beispiel mit PHP realisiert und liegt auf dem Webserver. Dort wird der Text angenommen und in eine XML-Struktur überführt, die sich auf dem Webserver als Datei befindet.

Der Knopf getText funktioniert genauso. Das PHP Script lädt diesmal die XML-Datei und gibt die XML-Struktur an das JavaScript, welches sich in der index.html befindet, weiter. Jetzt kommt das Dynamische. Die Daten aus der XML-Struktur werden ausgelesen und per DOM (Document Objekt Model) in die Seite integriert. Der Text wird also in die DOM-Struktur der Seite an eine vorgegebene Stelle gehängt. Der Text erscheint dort sofort. Alle anderen Teile der Seite bleiben unberührt.

Der Knopf rekursiv Abrufen funktioniert im Prinzip wie getText. Allerdings wird die Funktion getText() kontinuierlich abgerufen. Fügt jemand anderes also einen Text über die Funktion setText() hinzu, wird der neue Text nach einer kleine definierten Zeitspanne in jedem Browserfenster des Benutzers erscheinen, welcher den Knopf rekursives Abrufen gedrückt hat. Ohne weiteres Zutun des Benutzers. Die Informationen werden allso kontinuierlich vom Server abgerufen und aktualisiert.

[bearbeiten] Weitere Informationsquellen

  • Document Object Model
http://de.wikipedia.org/wiki/Document_Object_Model
  • Das XMLHttpRequest Objekt
http://de.wikipedia.org/wiki/XMLHttpRequest
  • Schaubilder und Grundlegendes mit Codebeispiel
http://de.wikipedia.org/wiki/Ajax_%28Programmierung%29
  • Umfassende Informationsquelle für Entwickler
http://developer.mozilla.org/en/docs/AJAX
  • Grundlagenartikel auf deutsch
http://developer.mozilla.org/de/docs/AJAX:Getting_Started

[bearbeiten] Entwicklertools

Firefox mit dem Addon Firebug

[bearbeiten] Quelldateien zum Beispiel des Vortrages

Persönliche Werkzeuge