Referent:        Torben Brodt
  Veranstaltung:   Fachseminar Webframeworks
  Datum:           13.12.2007
AJAX: Inhalt

    1. Einführung
    2. Technologien
          JavaScript, DOM, HTTP
      ●




    3. AJAX Code Beispiel
...
1/5
Webanwendungen

        Altes Web: Auf jede Reaktion folgen lange Ladezeiten
    




        Um 2005 revolutioniert ...
1/5
Webanwendungen




             
2/5
AJAX Einführung

        Asynchronous JavaScript and XML
    




        AJAX ist keine Programmiersprache
    



...
2/5
Was ist DOM?

        Document Object Model
    




        Repräsentierung von Inhalten in einem Baum
    




   ...
2/5
Was ist JavaScript?

        Client­Skriptsprache ­ vom Browser interpretiert
    




        ”überall” verfügbar, w...
2/5
JavaScript und DOM

        Volle Kontrolle über den Client­Code
    




        Einbettung in ein <script> Element ...
2/5
und HTTP? (synchron)

        Normale Websites werden in einem Rutsch geladen
    




        Eine GET Anfrage
    ...
2/5
asynchrones HTTP

        Daten können live geholt/gesendet worden 
    




        Browser kapselt Request in eigen...
2/5
und HTTP? (asynchron)




                
3/5
AJAX Beispiel

        Wir erzeugen ein XMLHttpRequest Objekt
    



            JavaScript Objekt zur HTTP Kommunik...
3/5
AJAX Beispiel

        Wir öffnen die Verbindung
    




        Wir legen eine Callback Methode fest
    




    ...
3/5
AJAX Beispiel

        Callback ­ wir behandeln die Server­Antwort
    




        XML Objekt vom Server und HTML Ob...
3/5
AJAX Beispiel #




                   
4/5
Wann spricht man von AJAX?

        JavaScript Effekte sind kein AJAX
    




        Interaktivität und Asynchronit...
4/5
Wann spricht man von AJAX?

               Bewertungen live 
           




               Drag/Drop speichern 
    ...
5/5
Probleme der Entwickler

        Serverüberlastung (Polling­Problem)
    




            n­gleichzeitige Clients.. s...
5/5
Probleme der Entwickler

        Clientüberlastung
    




            mehr und mehr Daten werden dem Client 
      ...
5/5
Probleme der Entwickler

        Zeichenkodierung im Web
    




            Webserver, DBMS und Website (Metaangabe...
5/5
Probleme der Entwickler

        Zeichenkodierung im Web
    




            Webserver, DBMS und Website (Metaangabe...
5/5
Probleme der Entwickler

        Browser­Navigation ­> Bookmarking ­> 
    



          ... ­> Browserhistorie ­> De...
5/5
Probleme der Entwickler

        Überlappende, asynchrone AJAX Aufrufe
    




            Variante 1: Falsche Verwe...
5/5
Frameworks

        vollständige und abgerundete Frameworks vorhanden
    




        aber unüberschaubarer Markt
  ...
Fragen




          
Nächste SlideShare
Wird geladen in …5
×

AJAX

124.386 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
124.386
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    

×