AJAX Präsentation

    AJAX Präsentation

    [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
    1. Einführung
      • Technologien
    2. JavaScript, DOM, HTTP
    3. AJAX Code Beispiel
    4. Abgrenzung JavaScript/AJAX
    5. 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
    Was ist DOM?
    • Document Object Model
    • Repräsentierung von Inhalten in einem Baum
    • Standardisierung durch W3C (z.B. XHTML)
    Was ist JavaScript?
    • 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.
    JavaScript und DOM
    • Volle Kontrolle über den Client-Code
    • Einbettung in ein <script> Element innerhalb <head>
    • Traversierung, Manipulierung, ...
    und HTTP? (synchron)
    • Normale Websites werden in einem Rutsch geladen
    • Eine GET Anfrage
    • Eine HTTP Antwort
    asynchrones HTTP
    • 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)
    AJAX Beispiel
    • Wir erzeugen ein XMLHttpRequest Objekt
    • JavaScript Objekt zur HTTP Kommunikation
    • Wir öffnen die Verbindung
    • Callback - wir behandeln die Server-Antwort
    Wann spricht man von AJAX?
    • 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
    Bewertungen live
    • Drag/Drop speichern
    • Instant Messaging online
    • Texte live ändern
    • Uploadbalken
    Probleme der Entwickler
    • 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 (&auml;) 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
    Frameworks
    • vollständige und abgerundete Frameworks vorhanden
    • aber unüberschaubarer Markt
    • alle Frameworks unterscheiden sich in Kleinigkeiten


    Download als OpenOffice Datei