SlideShare ist ein Scribd-Unternehmen logo
  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

                               
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
    




                                  
1/5
Webanwendungen




             
2/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?

        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.
                                   
2/5
JavaScript und DOM

        Volle Kontrolle über den Client­Code
    




        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)




                
3/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 Server­Antwort
    




        XML Objekt vom Server und HTML Objekt des 
    



        Clients werden beide durch DOM repräsentiert 
        und identisch behandelt
                               
3/5
AJAX Beispiel #




                   
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


                                     
4/5
Wann spricht man von AJAX?

               Bewertungen live 
           




               Drag/Drop speichern 
           




               Instant Messaging online 
           




               Texte live ändern 
           




               Uploadbalken 
           
                    
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
        




                                       
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 UTF­8
            Selbst mit Entities (&auml;) 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 UTF­8 verwenden
            Selbst mit Entities (&auml;) kann man Probleme 
        



            erhalten, da XML unvalide
            Viele Sprachen bieten utf8_encode/decode
        




                                   
5/5
Probleme der Entwickler

        Browser­Navigation ­> 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
    




                                  
Fragen




          

Weitere ähnliche Inhalte

Andere mochten auch

Wie spät ist es?
Wie spät ist es?Wie spät ist es?
Wie spät ist es?
guest945301
 
Studie Mittelstandskommunikation 2015 – Ergebnisbericht
Studie Mittelstandskommunikation 2015 – ErgebnisberichtStudie Mittelstandskommunikation 2015 – Ergebnisbericht
Studie Mittelstandskommunikation 2015 – Ergebnisbericht
Fink & Fuchs AG
 
Schulug Grundlagen SAP BI / BW
Schulug Grundlagen SAP BI / BWSchulug Grundlagen SAP BI / BW
Schulug Grundlagen SAP BI / BW
A. LE
 
Creative Technology
Creative TechnologyCreative Technology
Creative Technology
More Than Advertising
 
Einführung Kommunikationsstrategie
Einführung KommunikationsstrategieEinführung Kommunikationsstrategie
Einführung Kommunikationsstrategie
BrandDoctor
 
Pythonによる機械学習入門 ~Deep Learningに挑戦~
Pythonによる機械学習入門 ~Deep Learningに挑戦~Pythonによる機械学習入門 ~Deep Learningに挑戦~
Pythonによる機械学習入門 ~Deep Learningに挑戦~
Yasutomo Kawanishi
 
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
SlideShare
 
Wie wird das management team agil - ulf brandes, #manage-agile - 18. oktober ...
Wie wird das management team agil - ulf brandes, #manage-agile - 18. oktober ...Wie wird das management team agil - ulf brandes, #manage-agile - 18. oktober ...
Wie wird das management team agil - ulf brandes, #manage-agile - 18. oktober ...
Ulf Brandes
 
Le savoir traditionnel et la cybercartographie
Le savoir traditionnel et la cybercartographieLe savoir traditionnel et la cybercartographie
Le savoir traditionnel et la cybercartographie
Communication and Media Studies, Carleton University
 
Bora Bora
Bora BoraBora Bora
Bora Bora
VANESSA DESILES
 
Une introduction au e-commerce (ICHEC 2012)
Une introduction au e-commerce (ICHEC 2012)Une introduction au e-commerce (ICHEC 2012)
Une introduction au e-commerce (ICHEC 2012)
David Hachez
 
Pindyck microeconomics 6ed solution
Pindyck microeconomics 6ed solutionPindyck microeconomics 6ed solution
Pindyck microeconomics 6ed solution
Sara Poveda
 
Bildwörterbuch deutsch
Bildwörterbuch deutschBildwörterbuch deutsch
Bildwörterbuch deutschErich Augusto
 
Certificat Medical du Sportif pa 10 05 11
Certificat Medical du Sportif pa 10 05 11Certificat Medical du Sportif pa 10 05 11
Certificat Medical du Sportif pa 10 05 11raymondteyrouz
 
8085 Paper Presentation slides,ppt,microprocessor 8085 ,guide, instruction set
8085 Paper Presentation slides,ppt,microprocessor 8085 ,guide, instruction set8085 Paper Presentation slides,ppt,microprocessor 8085 ,guide, instruction set
8085 Paper Presentation slides,ppt,microprocessor 8085 ,guide, instruction set
Saumitra Rukmangad
 
Symbol table design (Compiler Construction)
Symbol table design (Compiler Construction)Symbol table design (Compiler Construction)
Symbol table design (Compiler Construction)
Tech_MX
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShare
SlideShare
 
Step by Step Guide to Holy Umrah/Umra
 Step by Step Guide to Holy  Umrah/Umra Step by Step Guide to Holy  Umrah/Umra
Step by Step Guide to Holy Umrah/Umra
Tanveer Padder
 
Automobiles
AutomobilesAutomobiles
Automobiles
ashishmakhija86
 
Gestion de contenu et wikipédia
Gestion de contenu et wikipédiaGestion de contenu et wikipédia
Gestion de contenu et wikipédia
Sylvain Machefert
 

Andere mochten auch (20)

Wie spät ist es?
Wie spät ist es?Wie spät ist es?
Wie spät ist es?
 
Studie Mittelstandskommunikation 2015 – Ergebnisbericht
Studie Mittelstandskommunikation 2015 – ErgebnisberichtStudie Mittelstandskommunikation 2015 – Ergebnisbericht
Studie Mittelstandskommunikation 2015 – Ergebnisbericht
 
Schulug Grundlagen SAP BI / BW
Schulug Grundlagen SAP BI / BWSchulug Grundlagen SAP BI / BW
Schulug Grundlagen SAP BI / BW
 
Creative Technology
Creative TechnologyCreative Technology
Creative Technology
 
Einführung Kommunikationsstrategie
Einführung KommunikationsstrategieEinführung Kommunikationsstrategie
Einführung Kommunikationsstrategie
 
Pythonによる機械学習入門 ~Deep Learningに挑戦~
Pythonによる機械学習入門 ~Deep Learningに挑戦~Pythonによる機械学習入門 ~Deep Learningに挑戦~
Pythonによる機械学習入門 ~Deep Learningに挑戦~
 
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
 
Wie wird das management team agil - ulf brandes, #manage-agile - 18. oktober ...
Wie wird das management team agil - ulf brandes, #manage-agile - 18. oktober ...Wie wird das management team agil - ulf brandes, #manage-agile - 18. oktober ...
Wie wird das management team agil - ulf brandes, #manage-agile - 18. oktober ...
 
Le savoir traditionnel et la cybercartographie
Le savoir traditionnel et la cybercartographieLe savoir traditionnel et la cybercartographie
Le savoir traditionnel et la cybercartographie
 
Bora Bora
Bora BoraBora Bora
Bora Bora
 
Une introduction au e-commerce (ICHEC 2012)
Une introduction au e-commerce (ICHEC 2012)Une introduction au e-commerce (ICHEC 2012)
Une introduction au e-commerce (ICHEC 2012)
 
Pindyck microeconomics 6ed solution
Pindyck microeconomics 6ed solutionPindyck microeconomics 6ed solution
Pindyck microeconomics 6ed solution
 
Bildwörterbuch deutsch
Bildwörterbuch deutschBildwörterbuch deutsch
Bildwörterbuch deutsch
 
Certificat Medical du Sportif pa 10 05 11
Certificat Medical du Sportif pa 10 05 11Certificat Medical du Sportif pa 10 05 11
Certificat Medical du Sportif pa 10 05 11
 
8085 Paper Presentation slides,ppt,microprocessor 8085 ,guide, instruction set
8085 Paper Presentation slides,ppt,microprocessor 8085 ,guide, instruction set8085 Paper Presentation slides,ppt,microprocessor 8085 ,guide, instruction set
8085 Paper Presentation slides,ppt,microprocessor 8085 ,guide, instruction set
 
Symbol table design (Compiler Construction)
Symbol table design (Compiler Construction)Symbol table design (Compiler Construction)
Symbol table design (Compiler Construction)
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShare
 
Step by Step Guide to Holy Umrah/Umra
 Step by Step Guide to Holy  Umrah/Umra Step by Step Guide to Holy  Umrah/Umra
Step by Step Guide to Holy Umrah/Umra
 
Automobiles
AutomobilesAutomobiles
Automobiles
 
Gestion de contenu et wikipédia
Gestion de contenu et wikipédiaGestion de contenu et wikipédia
Gestion de contenu et wikipédia
 

Ähnlich wie AJAX

HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
PHP, AJAX und XUL im Intranet
PHP, AJAX und XUL im IntranetPHP, AJAX und XUL im Intranet
PHP, AJAX und XUL im Intranet
Markus Wolff
 
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-ApplikationenWebsockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
SpeedPartner GmbH
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
GFU Cyrus AG
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
André Krämer
 
Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13
Kay Strobach
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
A. LE
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
Forms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and OperationsForms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and Operations
Torsten Kleiber
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Jens Grochtdreis
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
Jürg Stuker
 
SNoUG 2015 - Vaadin - XPages 2.0?
SNoUG 2015 - Vaadin - XPages 2.0?SNoUG 2015 - Vaadin - XPages 2.0?
SNoUG 2015 - Vaadin - XPages 2.0?
René Winkelmeyer
 
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmateQS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
Michael Mirold
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
jan_mindmatters
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittdominion
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Niels de Bruijn
 

Ähnlich wie AJAX (20)

Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
PHP, AJAX und XUL im Intranet
PHP, AJAX und XUL im IntranetPHP, AJAX und XUL im Intranet
PHP, AJAX und XUL im Intranet
 
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-ApplikationenWebsockets: Leichtgewichtige Verbindungen für Web-Applikationen
Websockets: Leichtgewichtige Verbindungen für Web-Applikationen
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
 
Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13
 
PHP Sucks?!
PHP Sucks?!PHP Sucks?!
PHP Sucks?!
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Forms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and OperationsForms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and Operations
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
 
SNoUG 2015 - Vaadin - XPages 2.0?
SNoUG 2015 - Vaadin - XPages 2.0?SNoUG 2015 - Vaadin - XPages 2.0?
SNoUG 2015 - Vaadin - XPages 2.0?
 
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmateQS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schritt
 
Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)Anwendungsmodernisierung mit Oracle Application Express (APEX)
Anwendungsmodernisierung mit Oracle Application Express (APEX)
 

Mehr von Torben Brodt

Living Labs Challenge Workshop
Living Labs Challenge WorkshopLiving Labs Challenge Workshop
Living Labs Challenge Workshop
Torben Brodt
 
Recommender Trends 2014
Recommender Trends 2014Recommender Trends 2014
Recommender Trends 2014
Torben Brodt
 
Paper the plista dataset
Paper  the plista datasetPaper  the plista dataset
Paper the plista dataset
Torben Brodt
 
Nrs2013 recap
Nrs2013 recapNrs2013 recap
Nrs2013 recap
Torben Brodt
 
Open recommendation platform
Open recommendation platformOpen recommendation platform
Open recommendation platform
Torben Brodt
 
#TOA13 - Tech Opoen Air Recommender Hackathon
#TOA13 - Tech Opoen Air Recommender Hackathon#TOA13 - Tech Opoen Air Recommender Hackathon
#TOA13 - Tech Opoen Air Recommender Hackathon
Torben Brodt
 
Algorithmus, Good School, Camp Digital
Algorithmus, Good School, Camp DigitalAlgorithmus, Good School, Camp Digital
Algorithmus, Good School, Camp DigitalTorben Brodt
 
Realtime Recommender with Redis: Hands on
Realtime Recommender with Redis: Hands onRealtime Recommender with Redis: Hands on
Realtime Recommender with Redis: Hands on
Torben Brodt
 
Recommender Hackathon @plista 2013/04
Recommender Hackathon @plista 2013/04Recommender Hackathon @plista 2013/04
Recommender Hackathon @plista 2013/04
Torben Brodt
 
SIGIR 2013 BARS Keynote - the search for the best live recommender system
SIGIR 2013 BARS Keynote - the search for the best live recommender systemSIGIR 2013 BARS Keynote - the search for the best live recommender system
SIGIR 2013 BARS Keynote - the search for the best live recommender system
Torben Brodt
 
Content recommendations
Content recommendationsContent recommendations
Content recommendations
Torben Brodt
 
RecSys2012 inside the plista contest
RecSys2012   inside the plista contestRecSys2012   inside the plista contest
RecSys2012 inside the plista contest
Torben Brodt
 
Webhacks am Beispiel PHP + MySQL
Webhacks am Beispiel PHP + MySQLWebhacks am Beispiel PHP + MySQL
Webhacks am Beispiel PHP + MySQL
Torben Brodt
 
GIT / SVN
GIT / SVNGIT / SVN
GIT / SVN
Torben Brodt
 
Collaborative Filtering.. für automatische Empfehlungen
Collaborative Filtering.. für automatische EmpfehlungenCollaborative Filtering.. für automatische Empfehlungen
Collaborative Filtering.. für automatische Empfehlungen
Torben Brodt
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
Torben Brodt
 
Geld Verdienen Mit Adsense
Geld Verdienen Mit AdsenseGeld Verdienen Mit Adsense
Geld Verdienen Mit Adsense
Torben Brodt
 
Web 2.0 - "Fluch oder Segen"
Web 2.0 - "Fluch oder Segen"Web 2.0 - "Fluch oder Segen"
Web 2.0 - "Fluch oder Segen"
Torben Brodt
 

Mehr von Torben Brodt (18)

Living Labs Challenge Workshop
Living Labs Challenge WorkshopLiving Labs Challenge Workshop
Living Labs Challenge Workshop
 
Recommender Trends 2014
Recommender Trends 2014Recommender Trends 2014
Recommender Trends 2014
 
Paper the plista dataset
Paper  the plista datasetPaper  the plista dataset
Paper the plista dataset
 
Nrs2013 recap
Nrs2013 recapNrs2013 recap
Nrs2013 recap
 
Open recommendation platform
Open recommendation platformOpen recommendation platform
Open recommendation platform
 
#TOA13 - Tech Opoen Air Recommender Hackathon
#TOA13 - Tech Opoen Air Recommender Hackathon#TOA13 - Tech Opoen Air Recommender Hackathon
#TOA13 - Tech Opoen Air Recommender Hackathon
 
Algorithmus, Good School, Camp Digital
Algorithmus, Good School, Camp DigitalAlgorithmus, Good School, Camp Digital
Algorithmus, Good School, Camp Digital
 
Realtime Recommender with Redis: Hands on
Realtime Recommender with Redis: Hands onRealtime Recommender with Redis: Hands on
Realtime Recommender with Redis: Hands on
 
Recommender Hackathon @plista 2013/04
Recommender Hackathon @plista 2013/04Recommender Hackathon @plista 2013/04
Recommender Hackathon @plista 2013/04
 
SIGIR 2013 BARS Keynote - the search for the best live recommender system
SIGIR 2013 BARS Keynote - the search for the best live recommender systemSIGIR 2013 BARS Keynote - the search for the best live recommender system
SIGIR 2013 BARS Keynote - the search for the best live recommender system
 
Content recommendations
Content recommendationsContent recommendations
Content recommendations
 
RecSys2012 inside the plista contest
RecSys2012   inside the plista contestRecSys2012   inside the plista contest
RecSys2012 inside the plista contest
 
Webhacks am Beispiel PHP + MySQL
Webhacks am Beispiel PHP + MySQLWebhacks am Beispiel PHP + MySQL
Webhacks am Beispiel PHP + MySQL
 
GIT / SVN
GIT / SVNGIT / SVN
GIT / SVN
 
Collaborative Filtering.. für automatische Empfehlungen
Collaborative Filtering.. für automatische EmpfehlungenCollaborative Filtering.. für automatische Empfehlungen
Collaborative Filtering.. für automatische Empfehlungen
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Geld Verdienen Mit Adsense
Geld Verdienen Mit AdsenseGeld Verdienen Mit Adsense
Geld Verdienen Mit Adsense
 
Web 2.0 - "Fluch oder Segen"
Web 2.0 - "Fluch oder Segen"Web 2.0 - "Fluch oder Segen"
Web 2.0 - "Fluch oder Segen"
 

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? 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. 2/5 JavaScript und DOM Volle Kontrolle über den Client­Code  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 Server­Antwort  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 (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. 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 UTF­8 Selbst mit Entities (&auml;) 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 UTF­8 verwenden Selbst mit Entities (&auml;) kann man Probleme   erhalten, da XML unvalide Viele Sprachen bieten utf8_encode/decode     
  • 22. 5/5 Probleme der Entwickler Browser­Navigation ­> 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 