AJAX

122.891 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
2 Kommentare
17 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
122.891
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
75
Aktionen
Geteilt
0
Downloads
605
Kommentare
2
Gefällt mir
17
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

AJAX

  1. 1.   Referent:  Torben Brodt   Veranstaltung: Fachseminar Webframeworks   Datum: 13.12.2007
  2. 2. AJAX: Inhalt 1. Einführung 2. Technologien JavaScript, DOM, HTTP ● 3. AJAX Code Beispiel 4. Abgrenzung JavaScript/AJAX 5. Probleme    
  3. 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     
  4. 4. 1/5 Webanwendungen    
  5. 5. 2/5 AJAX Einführung Asynchronous JavaScript and XML  AJAX ist keine Programmiersprache  Zusammenführung mehrerer Technologien  DOM  JavaScript  HTTP     
  6. 6. 2/5 Was ist DOM? Document Object Model  Repräsentierung von Inhalten in einem Baum  Standardisierung durch W3C (z.B. XHTML)     
  7. 7. 2/5 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.    
  8. 8. 2/5 JavaScript und DOM Volle Kontrolle über den Client­Code  Einbettung in ein <script> Element innerhalb <head>  Traversierung, Manipulierung, ...     
  9. 9. 2/5 und HTTP? (synchron) Normale Websites werden in einem Rutsch geladen  Eine GET Anfrage  Eine HTTP Antwort     
  10. 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    
  11. 11. 2/5 und HTTP? (asynchron)    
  12. 12. 3/5 AJAX Beispiel Wir erzeugen ein XMLHttpRequest Objekt  JavaScript Objekt zur HTTP Kommunikation     
  13. 13. 3/5 AJAX Beispiel Wir öffnen die Verbindung  Wir legen eine Callback Methode fest  Wir schicken den Request ab     
  14. 14. 3/5 AJAX Beispiel Callback ­ wir behandeln die Server­Antwort  XML Objekt vom Server und HTML Objekt des   Clients werden beide durch DOM repräsentiert  und identisch behandelt    
  15. 15. 3/5 AJAX Beispiel #    
  16. 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. 17. 4/5 Wann spricht man von AJAX? Bewertungen live   Drag/Drop speichern   Instant Messaging online   Texte live ändern   Uploadbalken      
  18. 18. 5/5 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     
  19. 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. 20. 5/5 Probleme der Entwickler 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     
  21. 21. 5/5 Probleme der Entwickler Zeichenkodierung im Web  Webserver, DBMS und Website (Metaangabe)   sollten alle UTF­8 verwenden Selbst mit Entities (&auml;) kann man Probleme   erhalten, da XML unvalide Viele Sprachen bieten utf8_encode/decode     
  22. 22. 5/5 Probleme der Entwickler Browser­Navigation ­> Bookmarking ­>   ... ­> Browserhistorie ­> Deep Links    
  23. 23. 5/5 Probleme der Entwickler Überlappende, asynchrone AJAX Aufrufe  Variante 1: Falsche Verwendung in einer Variablen  Variante 2: Unbekannte Latenzzeit     
  24. 24. 5/5 Frameworks vollständige und abgerundete Frameworks vorhanden  aber unüberschaubarer Markt  alle Frameworks unterscheiden sich in Kleinigkeiten     
  25. 25. Fragen    

×