AJAX
•
17 gefällt mir•49,922 views
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.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie AJAX
Ähnlich wie AJAX (20)
Mehr von Torben Brodt
Mehr von Torben Brodt (18)
AJAX
- 1. Referent: Torben Brodt Veranstaltung: Fachseminar Webframeworks Datum: 13.12.2007
- 2. AJAX: Inhalt 1. Einführung 2. Technologien JavaScript, DOM, HTTP ● 3. AJAX Code Beispiel 4. Abgrenzung JavaScript/AJAX 5. Probleme
- 3. 1/5 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
- 5. 2/5 AJAX Einführung Asynchronous JavaScript and XML AJAX ist keine Programmiersprache Zusammenführung mehrerer Technologien DOM JavaScript HTTP
- 6. 2/5 Was ist DOM? Document Object Model Repräsentierung von Inhalten in einem Baum Standardisierung durch W3C (z.B. XHTML)
- 7. 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.
- 8. 2/5 JavaScript und DOM Volle Kontrolle über den ClientCode Einbettung in ein <script> Element innerhalb <head> Traversierung, Manipulierung, ...
- 9. 2/5 und HTTP? (synchron) Normale Websites werden in einem Rutsch geladen Eine GET Anfrage Eine HTTP Antwort
- 10. 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
- 12. 3/5 AJAX Beispiel Wir erzeugen ein XMLHttpRequest Objekt JavaScript Objekt zur HTTP Kommunikation
- 13. 3/5 AJAX Beispiel Wir öffnen die Verbindung Wir legen eine Callback Methode fest Wir schicken den Request ab
- 14. 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
- 16. 4/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
- 17. 4/5 Wann spricht man von AJAX? Bewertungen live Drag/Drop speichern Instant Messaging online Texte live ändern Uploadbalken
- 18. 5/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
- 19. 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
- 20. 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
- 21. 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
- 22. 5/5 Probleme der Entwickler BrowserNavigation > Bookmarking > ... > Browserhistorie > Deep Links
- 23. 5/5 Probleme der Entwickler Überlappende, asynchrone AJAX Aufrufe Variante 1: Falsche Verwendung in einer Variablen Variante 2: Unbekannte Latenzzeit
- 24. 5/5 Frameworks vollständige und abgerundete Frameworks vorhanden aber unüberschaubarer Markt alle Frameworks unterscheiden sich in Kleinigkeiten
- 25. Fragen