[slideshare]http://www.slideshare.net/d0nut/ajax-201122[/slideshare]
30 minütige AJAX Präsentation.
Begonnen bei DOM, JavaScript und HTTP werden hier die Basics behandelt.
Vermittelt gegen Ende viele technische Probleme, die mit AJAX kommen.
Dadurch wird auf Folgepräsentationen vorbereitet, die behandeln, wie die verschiedenen Web-Frameworks AJAX in den Griff bekommen.
Nächste Woche wird an dieser Stelle "meine" Lösung präsentiert: Das Google Web Toolkit.
AJAX
Webanwendungen
AJAX Einführung
Download als OpenOffice Datei
30 minütige AJAX Präsentation.
Begonnen bei DOM, JavaScript und HTTP werden hier die Basics behandelt.
Vermittelt gegen Ende viele technische Probleme, die mit AJAX kommen.
Dadurch wird auf Folgepräsentationen vorbereitet, die behandeln, wie die verschiedenen Web-Frameworks AJAX in den Griff bekommen.
Nächste Woche wird an dieser Stelle "meine" Lösung präsentiert: Das Google Web Toolkit.
AJAX
- Einführung
- Technologien
- JavaScript, DOM, HTTP
- AJAX Code Beispiel
- Abgrenzung JavaScript/AJAX
- Probleme
Webanwendungen
- Altes Web: Auf jede Reaktion folgen lange Ladezeiten
- Um 2005 revolutioniert AJAX den Begriff ~ Web 2.0?
- Nun gleicht Bedienung der von Desktop Anwendungen
- Google wurde technologischer Vorreiter mit:
- Google Maps, Google Mail, Google Suggest
- Heute kompletter Office Ersatz
AJAX Einführung
- Asynchronous JavaScript and XML
- AJAX ist keine Programmiersprache
- Zusammenführung mehrerer Technologien
- DOM
- JavaScript
- HTTP
- Document Object Model
- Repräsentierung von Inhalten in einem Baum
- Standardisierung durch W3C (z.B. XHTML)
- Client-Skriptsprache - vom Browser interpretiert
- ”überall” verfügbar, wenig Anforderungen, keine VM
- Benutzt zur Ereignisbehandlung (hover, focus, ...)
- Dynamische Manipulierung des Dokuments (DOM)
- Problem: Teils unterschiedliche Funktionen zwischen verschiedenen Browsern
- Nähe zu Flash begründet! Gleiche Grundlage ECMA. JavaScript2 wird auf ActionScript 3 basieren.
- Volle Kontrolle über den Client-Code
- Einbettung in ein <script> Element innerhalb <head>
- Traversierung, Manipulierung, ...
- Normale Websites werden in einem Rutsch geladen
- Eine GET Anfrage
- Eine HTTP Antwort
- Daten können live geholt/gesendet worden
- Browser kapselt Request in eigenen Thread
- weder TCP, noch andere Socketverbindung nötig!
- Im Idealfall nur Datenübertragung - Teile werden aktualisiert
- und HTTP? (asynchron)
- Wir erzeugen ein XMLHttpRequest Objekt
- JavaScript Objekt zur HTTP Kommunikation
- Wir öffnen die Verbindung
- Callback - wir behandeln die Server-Antwort
- JavaScript Effekte sind kein AJAX
- Interaktivität und Asynchronität sind nicht das selbe
- Interaktivität = Benutzer agiert mit Seite
- durch AJAX werden die Anfragen bis in ein Datenmodel im Backend durchgereicht
- durch Asynchronität muss der Benutzer während dem Nachladen nicht warten
- Drag/Drop speichern
- Instant Messaging online
- Texte live ändern
- Uploadbalken
- Serverüberlastung (Polling-Problem)
- n-gleichzeitige Clients.. sekündliche Abfragen
- Client: HTTP Verbindung zum Server
- Gibt es neue Nachrichten?
- Server: Verbindung zu Datenbank/IRC Socket
- Ja, gibt es. Hier sind die Daten...
- Abfruf der Daten und Einfügen
- Clientüberlastung
- mehr und mehr Daten werden dem Client hinzugefügt
- DOM Baum wächst und wächst -> häufiges Neurendern
- Operationen dauern länger, Speicherverbrauch steigt
- Hoffnung: JavaScript nutzt Garbage Collector
- Zeichenkodierung im Web
- Webserver, DBMS und Website (Metaangabe) benutzen im Idealfall alle UTF-8
- Selbst mit Entities (ä) kann man Probleme erhalten, da wenn Entity nicht bekannt ”unvalid”
- Viele Sprachen bieten utf8_encode/decode
- Browser-Navigation -> Bookmarking -> Browserhistorie -> Deep Links
- Überlappende, asynchrone AJAX Aufrufe
- Variante 1: Falsche Verwendung in einer Variablen
- Variante 2: Unbekannte Latenzzeit
- vollständige und abgerundete Frameworks vorhanden
- aber unüberschaubarer Markt
- alle Frameworks unterscheiden sich in Kleinigkeiten
Download als OpenOffice Datei