Ajax - Asychronous JavaScript & XML
Von Webseiten zu Webelementen
Dipl.-Informationswirt Sascha A. Carlin
Sitewards GmbH — www.sitewards.com
Technik im Detail
- (X)HTML
- DOM
<div id="news-box">
- JavaScript
XMLHttpRequest()/ActiveXObject()getElementByID()innerHTML()
- Datentransport
- JSON (#)
- XML
Web-Interaktion & Ajax I
Web-Interaktion & Ajax II
- Von dynamischen Webseiten…
- … zu dynamischen Webseitenelementen.
Anwendungsbeispiele
Vorteile dynamischer Webseitenelemente
- Bandbreite: Statt ganzer Seiten werden nur aktualisierte Inhalte neu geladen.
- Softwareentwicklung: kleinere Teilaufgaben, geringere Fehleranfälligkeit.
- User Experience: schnellere und direktere Reaktion auf Eingaben.
- "schneller": Zeit von Aktion bis Reaktion wird geringer.
- "direkter": Klick unten rechts, sofort ändert sich der Inhalt genau an der Stelle. Kaum Aufmerksamkeitsverlust.
Vorläufiges Fazit:
- Direktere Reaktionen auf Benutzer-Eingaben
- Bedienelemente und -logiken wie auf dem Desktop
Fallen & Verlockungen
- Sicherheit
- User Experience & Usability
- Komlexität in Design & Entwicklung
Sicherheit von Ajax-Applikationen
- Input-Validierung gehört auf den Server.
- Referer und Tokens nutzen.
User Experience & Usability
- Form follows function — Function follows form.
- Ohne Javascript geht nichts. Punkt.
- Kein "Zurück"-Button mehr und…
- … keine Bookmarks
URL Design & Ajax
- Exkurs: URI, URL & URN. (#)
- Gute URIs ändern sich nicht. (#)
- Ajax und URIs
- Ansätze, jeder Aktion eine URI zuzuordnen. (#, #, #, #)
Gesteigerte Komplexität
- Layout sollte sein:
- fließend,
- anpassungsfähig.
- Design sollte:
- Den Anwender führen,
- visuelle Effekte sparsam einsetzen.
- Softwareentwicklung muss:
- Fallbacks anbieten, d. h. Funktionalität sowohl auf dem Client als auch auf dem Server implementieren.
- Beides testen und dann…
Themen, die hier außen vor geblieben sind…
- Accessibility (#, #)
- Webdesign, (X)HTML, CSS.
- XML, JSON.
- Graceful degradation or die();
- Ajax in der Industrie (#, #)
Fazit
- Ajax benötigt zwingend JavaScript.
- Ajax kann helfen, Interaktion zu verbessern.
- Ajax ist Teamwork zwischen Design und Softwareentwicklung.
- Graceful degradation or die();