1 / 25

AJAX

AJAX. ( A synchronous J avascript A nd X ml ). PLAN. Introduction Qu’est-ce-qu’Ajax ? Du neuf avec du vieux ? Apports d’Ajax Limitations d’Ajax Mise en œuvre Exemple d’utilisation Conclusion Questions & Réponses. PLAN. Introduction Qu’est-ce-qu’Ajax ? Du neuf avec du vieux ?

drake-olsen
Download Presentation

AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX ( Asynchronous Javascript And Xml )

  2. PLAN • Introduction • Qu’est-ce-qu’Ajax ? • Du neuf avec du vieux ? • Apports d’Ajax • Limitations d’Ajax • Mise en œuvre • Exemple d’utilisation • Conclusion • Questions & Réponses

  3. PLAN • Introduction • Qu’est-ce-qu’Ajax ? • Du neuf avec du vieux ? • Apports d’Ajax • Limitations d’Ajax • Mise en œuvre • Exemple d’utilisation • Conclusion • Questions & Réponses

  4. Introduction • Évolution du Web • Web 1.0 (1994-1997) : statique • HTML, GIF • Web 1.5 (1997-2003) : dynamique • DHTML, PHP/ASP/JSP, CSS • Web 2.0 (2003-…) : collaboratif • AJAX, XHTML, XML, RSS, SOAP Source : http://web2.wsj2.com/

  5. PLAN • Introduction • Qu’est-ce-qu’Ajax ? • Du neuf avec du vieux ? • Apports d’Ajax • Limitations d’Ajax • Mise en œuvre • Exemple d’utilisation • Conclusion • Questions & Réponses

  6. Qu’est-ce-qu’Ajax ? • Le terme « Ajax » • Jesse James GARRET, article de février 2005 sur AdaptivePath.com • Une architecture, pas une technologie • Asynchronous Javascript And XML • Javascript • XML • Asynchrone

  7. Qu’est-ce-qu’Ajax ? (suite) • Web 1.x : Synchrone

  8. Qu’est-ce-qu’Ajax ? (suite) • Web 2.0 : Asynchrone

  9. Qu’est-ce-qu’Ajax ? (suite) • Les 3 Principes d’Ajax : • Le navigateur héberge une application, et pas du contenu. • Le serveur fournit des données, et pas du contenu. • L’interaction utilisateur avec l’application doit être fluide et continue (via des requêtes client-serveur implicites).

  10. Qu’est-ce-qu’Ajax ? (suite) • Ajax : concrètement AJAX = XHTML + CSS + DOM + XML + JS + XMLHttpRequest • Présentation du contenu avec XHTML et CSS • Affichage et interaction dynamique grâce à DOM • Échange et manipulation de données en XML • Requêtes HTTP asynchrone via l’objet JavaScript XMLHttpRequest • Gestion des évènements utilisateurs (clavier&souris) avec JavaScript

  11. PLAN • Introduction • Qu’est-ce-qu’Ajax ? • Du neuf avec du vieux ? • Apports d’Ajax • Limitations d’Ajax • Mise en œuvre • Exemple d’utilisation • Conclusion • Questions & Réponses

  12. Du neuf avec du vieux ? • Technologie ancienne : • Microsoft ActiveX dans InternetExplorer 5 dès 1999 • Pourquoi l’utiliser maintenant ? • Effet Google (GMail, GoogleMap, GoogleSuggest...) • Frustrations générées par les applications Web classiques • Utilisation de plus en plus importante d’Internet • Utilisateur nomade (domicile, bureau, voyage…) • Tendance actuelle du 100% Web • Meilleure infrastructure (ADSL, Cable...)

  13. PLAN • Introduction • Qu’est-ce-qu’Ajax ? • Du neuf avec du vieux ? • Apports d’Ajax • Limitations d’Ajax • Mise en œuvre • Exemple d’utilisation • Conclusion • Questions & Réponses

  14. Apports d’Ajax • Utilisabilité et interactivité • Supporté en natif par la majorité des navigateurs (sans plugin) et portable (Linux, Mac, Windows) • Gain économique : • Bande passante • Architecture logiciel centralisée

  15. Limitations d’Ajax • Problème de compatibilité entre les navigateurs • Nécessite de gérer les cas où Ajax est indisponible • Accessibilité et référencement limités • Dépendance importante avec le réseau

  16. PLAN • Introduction • Qu’est-ce-qu’Ajax ? • Du neuf avec du vieux ? • Apports d’Ajax • Limitations d’Ajax • Mise en œuvre • Exemple d’utilisation • Conclusion • Questions & Réponses

  17. Mise en œuvre • 3 types de stratégies : • Ajax « bricolage » • Codage à la main • Librairie Ajax coté client • Dojo, Prototype, Rialto, Rico, Script.aculo.us… • Framework Ajax client-serveur • Atlas, Ajax4JSF, DWR, ROR…

  18. Mise en œuvre (1) • Ajax « bricolage » : • Avantages : • finesse de contrôle du traitement • Inconvénients : • Nécessite de maitriser l’ensemble des composants • Nécessite de gérer les incompatibilités entre navigateurs • Débogage difficile

  19. Mise en œuvre (2) • Librairie Ajax coté client • Avantages : • Abstraction d’Ajax coté client • limitation du code JS à produire • Gestion de l’interopérabilité et de l’accessibilité • Inconvénients : • Ne peut pas répondre à tous les besoins • Difficultés pour utiliser plusieurs librairies simultanément

  20. Mise en œuvre (3) • Framework Ajax client-serveur • Avantages : • Abstraction de la couche Ajax cotés client et serveur • Intégration facile dans un projet • (+ même avantages que pour les librairies clients) • Inconvénients : • Forte dépendance client/serveur • (+ même inconvénients que pour les librairies clients)

  21. PLAN • Introduction • Qu’est-ce-qu’Ajax ? • Du neuf avec du vieux ? • Apports d’Ajax • Limitations d’Ajax • Mise en œuvre • Exemple d’utilisation • Conclusion • Questions & Réponses

  22. Exemple d’utilisation • NetVibes : http://www.netvibes.com/ • Un portail Web français personnalisable • Basé sur Ajax • représentatif du Web 2.0

  23. PLAN • Introduction • Qu’est-ce-qu’Ajax ? • Du neuf avec du vieux ? • Apports d’Ajax • Limitations d’Ajax • Mise en œuvre • Exemple d’utilisation • Conclusion • Questions & Réponses

  24. Conclusion • Tentative d’homogénéisation par Open Ajax Alliance • Convergence vers quelques librairies et frameworks • Ajax est une transition vers les futurs standards Web • XHTML 2, CSS 3, XFORM...

  25. Questions & Réponses

More Related