AJAX/ ATLAS

Was ist AJAX

Das Akronym Ajax steht für „Asynchronous Javascript And XML". Im Kern geht es dabei darum, Webseiten interaktiver zu gestalten. Bereits mit dem Internet Explorer 5 waren eigentlich alle für Ajax benötigten Komponenten in einem gängigen Browser vorhanden, fanden aber keine breite Anwendung. Der Microsoft-Konkurrent Google dagegen schaffte es mit seinem Ajax-basierten E-Mail-Dienst GMail einen wahren Ajax-Boom auszulösen. 

Die Idee hinter Ajax besteht daraus, Teile einer Webseite asynchron nachzuladen und den Inhalt der Webseite dadurch zu verändern. Das bedeutet, dass bei einer Veränderung nicht die komplette Seite neu geladen wird, sondern lediglich die geänderten Inhalten. Dafür wird ein so genannter XMLHttpRequest aus einem JavaScript Script heraus ausgelöst. Dieser Request erfragt von einem Server Inhalte, die typischerweise per XML an das JavaScript zurück gesendet werden. Das Script wertet dann dieses XML aus. Die Daten aus dem XML setzt das Script dann um und ändert mit Hilfe des DOM (Document Object Model) die Website entsprechend [tecchannel.de]

AJAX wird heute von allen gängigen Browsern unterstützt (darunter IE, Netscape, Firefox, Opera).

Effekte

• Mit AJAX verleiht man Webapplikationen ein mehr Windows-Like User Interface.
• Die auf User-Events reagierenden Server-Requests (XML über HTTP) laufen im Hintergrund und unterbrechen nicht die Interaktion des Nutzers mit der restlichen Seite.
• partielles Laden bringt gegenüber kompletten Reload der Seite erhebliche Performance-Vorteile, insbesondere bei großen Datenmengen, weniger Flicker-Effekte, kein Verlust der Scroll-Position der Seite und des Fokus.
• Einzelne Elemente einer Seite (Tabellen, Controls, Layer) können an eigene unabhängige Server-Resourcen gebunden werden (Ähnlichkeit mit Frames), dadurch neue Möglichkeiten für modulares Design eines Frontends

Anwendungsfälle

• Auto-Completion (Vorschlagen von Texteingaben in einem Popup-Layer)
• Automatische Korrektur von Texteingaben
• Aktualisieren von Formularkomponenten, Panels, Select-Box-Listen
• Direktes Rückschreiben von Inputs in eine Server-Resource
• Aktualisieren, Umsortieren von Suchausgaben/Tabellen
• Nachfüllen von Trees beim aufklappen
• Live-Anzeige von Serverdaten (Polling)
• Panels (eigenständige Sub-Appliklationen)

Programmierungsansatz

1. Ein JS-Script reagiert auf ein Ereignis und holt sich evtl. erforderliche Eingaben aus dem DOM (Texheingabe, Select-Box, etc)
2. erzeugt einen GET-Request (im Browser eingebautes XMLHttpRequest) und setzt diesen ab.
3. Überwacht die Ausführung des Http-Request (ebenfalls ereignisgesteuert)
4. Parst den XML-Response (mittels des eingebauten XML-Parsers) und setzt Informationen in das DOM ein

Einige AJAX-Features (Auto-Completion) lassen sich relativ einfach in bestehende Seiten ergänzen. Komplexe AJAX-Features (Panels,Tabellenausgaben) erfordern dagegen ein Framework.