Embed Size (px)
DESCRIPTION
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.
Citation preview
Referent: Torben Brodt Veranstaltung: Fachseminar Webframeworks Datum: 13.12.2007
AJAX: Inhalt
1. Einführung
2. Technologien● 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
1/5
Webanwendungen 1/5
AJAX Einführung
Asynchronous JavaScript and XML AJAX ist keine Programmiersprache Zusammenführung mehrerer Technologien
DOM JavaScript HTTP
2/5
Was ist DOM?
Document Object Model Repräsentierung von Inhalten in einem Baum Standardisierung durch W3C (z.B. XHTML)
2/5
Was ist JavaScript?
ClientSkriptsprache 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.
2/5
JavaScript und DOM
Volle Kontrolle über den ClientCode Einbettung in ein <script> Element innerhalb <head> Traversierung, Manipulierung, ...
2/5
und HTTP? (synchron)
Normale Websites werden in einem Rutsch geladen Eine GET Anfrage Eine HTTP Antwort
2/5
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
2/5
und HTTP? (asynchron) 2/5
AJAX Beispiel
Wir erzeugen ein XMLHttpRequest Objekt JavaScript Objekt zur HTTP Kommunikation
3/5
AJAX Beispiel
Wir öffnen die Verbindung
Wir legen eine Callback Methode fest
Wir schicken den Request ab
3/5
AJAX Beispiel
Callback wir behandeln die ServerAntwort
XML Objekt vom Server und HTML Objekt des Clients werden beide durch DOM repräsentiert und identisch behandelt
3/5
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
4/5
Wann spricht man von AJAX?
Bewertungen live Drag/Drop speichern Instant Messaging online Texte live ändern Uploadbalken
4/5
Probleme der Entwickler
Serverüberlastung (PollingProblem) ngleichzeitige 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
5/5
Probleme der Entwickler
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
5/5
Probleme der Entwickler
Zeichenkodierung im Web Webserver, DBMS und Website (Metaangabe)
benutzen im Idealfall alle UTF8 Selbst mit Entities (ä) kann man Probleme
erhalten, da wenn Entity nicht bekannt ”unvalid” Viele Sprachen bieten utf8_encode/decode
5/5
Probleme der Entwickler
Zeichenkodierung im Web Webserver, DBMS und Website (Metaangabe)
sollten alle UTF8 verwenden Selbst mit Entities (ä) kann man Probleme
erhalten, da XML unvalide Viele Sprachen bieten utf8_encode/decode
5/5
Probleme der Entwickler
BrowserNavigation > Bookmarking > ... > Browserhistorie > Deep Links
5/5
Probleme der Entwickler
Überlappende, asynchrone AJAX Aufrufe Variante 1: Falsche Verwendung in einer Variablen Variante 2: Unbekannte Latenzzeit
5/5
Frameworks
vollständige und abgerundete Frameworks vorhanden aber unüberschaubarer Markt alle Frameworks unterscheiden sich in Kleinigkeiten
5/5
Fragen
