Ajax
                         Sujets spéciaux en TI

                    Le Web 2.0 : concepts et outils

                ...
Web traditionnel – Cliquez & attendez!




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, octob...
Web traditionnel – Cliquez & attendez!
   Applications Web traditionnelles sont lentes
   Chargement d'une nouvelle page...
Ajax – Une véritable percée!




                    AJAX
                                                                ...
Ajax – Une véritable percée!
 Ajax  (Asynchronous JavaScript & XML)
 Fini le pénible rechargement de pages!
 Réalise de...
Comprendre Ajax



             Ajax




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, octobre...
Ajax – Diagramme de collaboration
                                                                                        ...
Ajax – Diagramme de séquence - Web traditionnel

 En mode synchrone, le fureteur est gelé en attendant la réponse du serve...
Ajax – Diagramme de séquence – Application Web Ajax

En mode asynchrone, l'exécution dans le fureteur sur le poste client ...
Ajax – Diagramme de séquence


     En mode synchrone, le
     fureteur est gelé en attendant
     la réponse du serveur.
...
Ajax – Technologies impliquées
   CSS (Cascading Style Sheet) pour la présentation
   API DOM (Document Object Model) po...
Ajax - Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, octobre 2008
Ajax – Code XHTML
1) Ecrire le code XHTML de la page Web en isolant le code JavaScript et le style CSS dans
des fichiers s...
Ajax – Code JavaScript - Initialisation
2) Ecrire le code JavaScript en créant les liens entre les éléments de la page Web...
Ajax – Code JS – création de l'objet XHR
/* Création d'une requête basée sur un objet JavaScript XMLHttpRequest */
functio...
Ajax – Code JS – Appel & Callback
/* La fonction getReponseServeur() envoie une requête au serveur                   */
/*...
Ajax – Code JS – Utilitaires
/* Fonctions utilitaires du livre Head First Ajax */
/* de Brett McLaughlin chez O'Reilly Med...
Ajax – Code JS – Utilitaires (suite)
/* Fonctions utilitaires du livre Head First Ajax */
/* de Brett McLaughlin chez O'Re...
Ajax – Code Java – Servlet
package qc.ets.web2.ajax;

import   javax.servlet.*;
import   javax.servlet.http.*;
import   ja...
Ajax – Configuration – web.xml
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<web-app id=quot;WebApp_IDquot; vers...
Ajax - Inconvénients
   Effet « buzzword »
   Problèmes de compatibilité entre les différents fureteurs
   Ne fonctionn...
Ajax - Avantages
   Réponses rapides aux actions de l'utilisateur
   Applications Web riches, rapides et légères
   Pas...
Survol des technologies clients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, octobre 2008
JavaScript & DHTML vs Machines virtuelles
 Outils purs JavaScript
     Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, et...
Technologies Sources Libres vs Propriétaires
 Sources Libres
     Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc.
  ...
Survol des technologies serveurs




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montréal, octobre 2008
Survol des technologies serveurs
  Architecture client-serveur
  SOA (Service Oriented Architecture)
  Services Web
  Java...
Questions




                                   ?

GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   Montré...
Prochain SlideShare
Chargement dans…5
×

Ajax - GTI780 & MTI780 - ETS - A08

1 170 vues

Publié le

Présentation sur Ajax dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l\'Ecole de technologie supérieure, Montréal, Automne 2008

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 170
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
51
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ajax - GTI780 & MTI780 - ETS - A08

  1. 1. Ajax Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe GTI-780 / MTI-780 Montréal, octobre 2008
  2. 2. Web traditionnel – Cliquez & attendez! GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  3. 3. Web traditionnel – Cliquez & attendez!  Applications Web traditionnelles sont lentes  Chargement d'une nouvelle page à chaque action (cycle HTTP)  Navigateurs Web sont de simples terminaux HTML  Basé sur le paradigme de la page ou document  Chargement séquentiel d'une séries de pages  Les usagers attendent... GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  4. 4. Ajax – Une véritable percée! AJAX Le premier à utiliser le terme AJAX fut Jesse James Garrett en février 2005 GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  5. 5. Ajax – Une véritable percée!  Ajax (Asynchronous JavaScript & XML)  Fini le pénible rechargement de pages!  Réalise des requêtes asynchrones au serveur et fait la mise-à-jour de la page Web sans faire de chargement complet  Applications Web plus réactives et plus dynamiques  Objet XMLHttpRequest inventé par M$  Basé sur du code-client en JavaScript GTI-780 / MTI-780 Montréal, octobre 2008
  6. 6. Comprendre Ajax Ajax GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  7. 7. Ajax – Diagramme de collaboration Fureteur client Fureteur client Interface utilisateur Appel JavaScript Interface utilisateur HTML + CSS Moteur Ajax Requête HTTP Requête HTTP Réponse HTTP (HTML + CSS) Réponse XML / JSON / Texte Serveur Web Serveur Web et XML / JSON/ Texte Base de données, systèmes de gestion Serveur Base de données, systèmes de gestion Serveur Application Web traditionnelle Application Web Ajax GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php Montréal, octobre 2008
  8. 8. Ajax – Diagramme de séquence - Web traditionnel En mode synchrone, le fureteur est gelé en attendant la réponse du serveur. GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php Montréal, octobre 2008
  9. 9. Ajax – Diagramme de séquence – Application Web Ajax En mode asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse du serveur. La réponse sera traitée par une fonction de retour (fonction Callback) quand elle arrivera. L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest. GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php Montréal, octobre 2008
  10. 10. Ajax – Diagramme de séquence En mode synchrone, le fureteur est gelé en attendant la réponse du serveur. En mode asynchrone, l'exécution dans le fureteur sur le poste client se poursuit sans attendre la réponse du serveur. La réponse sera traitée par une fonction de retour (fonction Callback) quand elle arrivera. L'état de la requête est donné par l'attribut readyState de l'objet XMLHttpRequest. GTI-780 / MTI-780 Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php Montréal, octobre 2008
  11. 11. Ajax – Technologies impliquées  CSS (Cascading Style Sheet) pour la présentation  API DOM (Document Object Model) pour accéder et modifier les éléments de la page  JavaScript pour les traitements sur le poste client  L'objet JavaScript XMLHttpRequest* qui échange des données XML** avec le serveur de façon asynchrone***  Java (JEE), PHP, Ruby, .NET ou un autre langage peut être utilisé du coté serveur * On peut aussi utilisr un iFrame caché ** Échange de données en format XML, HTML, JSON ou du simple texte GTI-780 / MTI-780 *** Montréal, octobre 2008
  12. 12. Ajax - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  13. 13. Ajax – Code XHTML 1) Ecrire le code XHTML de la page Web en isolant le code JavaScript et le style CSS dans des fichiers séparés selon les principes du Unobtrusive JavaScript <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html> <head> <title>Test Ajax Simple</title> <!-- http://localhost:8080/ServeurAjaxSimple/testAjaxSimple.html --> <script type=quot;text/javascriptquot; src=quot;ajax.jsquot;> </script> <script type=quot;text/javascriptquot; src=quot;texte-utils.jsquot;> </script> </head> <body> <h3>Test Ajax Simple</h3> <fieldset> <legend>Formulaire</legend> <div> <!--L'usage de return false; a pour but de laisser le controle complet au code JavaScript --> <form id=quot;testFormquot; method=quot;getquot; onsubmit=quot;return false;quot;> <div id=quot;titrequot;>R&eacute;sultat de la requ&ecirc;te</div> <br/> <!-- Zone de la page Web à rafraîchir → <div id=quot;reponseDuServeurquot;>0</div> <br/> <div> <input id=quot;submitButtonquot; type=quot;buttonquot; value=quot;Appeler serveurquot; /> </div> </form> </div> </fieldset> </body> </html> GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  14. 14. Ajax – Code JavaScript - Initialisation 2) Ecrire le code JavaScript en créant les liens entre les éléments de la page Web et les fonctions JavaScript selon les principes du Unobtrusive JavaScript /* Requête basée sur un objet XMLHttpRequest ou XHR */ var requeteXHR = null; /* Association de la fonction getReponseServeur */ /* à l'événement onclick de l'élément submitButton */ /* Dans le pur style du Unobtrusive JavaScript */ window.onload = init; function init() { document.getElementById('submitButton').onclick = getReponseServeur; } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  15. 15. Ajax – Code JS – création de l'objet XHR /* Création d'une requête basée sur un objet JavaScript XMLHttpRequest */ function creerRequeteXHR() { try { /* Constructeur pour fureteur non Microsoft incluant Firefox */ requeteXHR = new XMLHttpRequest(); } catch (essaiMicrosoft) { try { /* Constructeur pour fureteur MS IE 7+ */ requeteXHR = new ActiveXObject(quot;Msxml2.XMLHTTPquot;); } catch (autreMicrosoft) { try { /* Constructeur pour autre fureteur MS IE */ requeteXHR = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); } catch (echec) { requeteXHR = null; } } } /* Echec de la création d'un objet XMLHttpRequest */ if (requeteXHR == null) { alert(quot;Impossible de créer l'objet requête XMLHttpRequest!quot;); } } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  16. 16. Ajax – Code JS – Appel & Callback /* La fonction getReponseServeur() envoie une requête au serveur */ /* et fournit une fonction Callback pour traiter la réponse lorsqu'elle sera prête */ function getReponseServeur() { creerRequeteXHR(); /* Pour contourner le problème du cache de l'URL on ajoute un paramètre bidon */ var url = quot;reponsequot; + quot;?parametrebidon=quot; + new Date().getTime(); requeteXHR.open(quot;GETquot;, url, true); /* On associe une fonction de retour (Callback) a l'evenement onreadystatechange */ requeteXHR.onreadystatechange = actualiserPageCallback; /* Ici on envoie une requête vide car == null */ requeteXHR.send(null); } /* Fonction de retour (Callback) qui s'exécute au retour de la réponse par le serveur */ function actualiserPageCallback() { /* L'état readyState == 4 signifie que le serveur a retourné une réponse */ if (requeteXHR.readyState == 4) { /* Le status == 200 signifie que la requête HTTP est réussie, sinon status retourne un code d'erreur */ if (requeteXHR.status == 200) { var nouveauNombre = requeteXHR.responseText; /* Accéder à l'élément à rafraîchir dans la page */ var ancienNombreElement = document.getElementById(quot;reponseDuServeurquot;); /* Rachaîchir l'élément reponseDuServeur du formulaire */ remplacerTexte(ancienNombreElement, nouveauNombre); } else { /* Echec de la requête HTTP, un code d'erreur est retourné */ alert(quot;*** Erreur! Le statut de la requête est : quot; + requeteXHR.status); } } } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  17. 17. Ajax – Code JS – Utilitaires /* Fonctions utilitaires du livre Head First Ajax */ /* de Brett McLaughlin chez O'Reilly Media 2006 */ function getTexte(noeud) { var texte = quot;quot;; if (noeud != null) { /* Tester s'il y a des noeuds enfants */ if (noeud.childNodes) { /* Parcourir les noeuds enfants */ for (var i = 0; i < noeud.childNodes.length; i++) { var noeudEnfant = noeud.childNodes[i]; if (noeudEnfant.nodeValue != null) { /* Accumule les textes des noeuds enfants */ texte = texte + noeudEnfant.nodeValue; } } } } return texte; } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  18. 18. Ajax – Code JS – Utilitaires (suite) /* Fonctions utilitaires du livre Head First Ajax */ /* de Brett McLaughlin chez O'Reilly Media 2006 */ function remplacerTexte(noeud, texte) { if (noeud != null) { effacerTexte(noeud); var nouveauNoeud = document.createTextNode(texte); noeud.appendChild(nouveauNoeud); } } function effacerTexte(noeud) { if (noeud != null) { /* Tester s'il y a des noeuds enfants */ if (noeud.childNodes) { /* Parcourir les noeuds enfants */ for (var i = 0; i < noeud.childNodes.length; i++) { var noeudEnfant = noeud.childNodes[i]; noeud.removeChild(noeudEnfant); } } } } GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  19. 19. Ajax – Code Java – Servlet package qc.ets.web2.ajax; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; import java.util.*; public class ServletAjaxSimple extends HttpServlet { public void init(ServletConfig config) throws ServletException { // Passer l'objet ServletConfig à la superclasse super.init(config); } // Traitement des requêtes HTTP Get public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } // Traitement des requêtes HTTP Post public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType(quot;text/htmlquot;); PrintWriter out = response.getWriter(); // Génération d'un nombre aléatoire entre 1 et 10 int nouveauNombreAleatoire = (((int) Math.round(Math.random()*9)) + 1); out.println(nouveauNombreAleatoire); out.close(); } }GTI-780 / MTI-780 Montréal, octobre 2008 GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  20. 20. Ajax – Configuration – web.xml <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <web-app id=quot;WebApp_IDquot; version=quot;2.4quot; xmlns=quot;http://java.sun.com/xml/ns/j2eequot; xmlns:xsi=quot;http://www.w3.org/2001/XMLSchema-instancequot; xsi:schemaLocation=quot;http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsdquot;> <servlet> <servlet-name>Servlet Ajax Simple</servlet-name> <servlet-class>qc.ets.web2.ajax.ServletAjaxSimple</servlet-class> </servlet> <!-- Mapping Servlet Ajax Simple --> <servlet-mapping> <servlet-name>Servlet Ajax Simple</servlet-name> <url-pattern>/reponse</url-pattern> </servlet-mapping> </web-app> GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  21. 21. Ajax - Inconvénients  Effet « buzzword »  Problèmes de compatibilité entre les différents fureteurs  Ne fonctionne pas si JavaScript est désactivé  Les données chargées de façon dynamique ne sont pas indexées par les moteurs de recherche  Si le traitement du côté serveur est long, le traitement asynchrone d'Ajax fait que les changements se font avec un délai  Le bouton de retour en arrière, l'URL ne change pas et les signets ne fonctionnent pas  Pas d'accès* en dehors du domaine du serveur  Plus exigeant sur le poste client (vieux PC ?) GTI-780 / MTI-780 * Note : En anglais « Same Origin Policy Montréal, octobre 2008
  22. 22. Ajax - Avantages  Réponses rapides aux actions de l'utilisateur  Applications Web riches, rapides et légères  Pas de long téléchargement, ni d'installation  Permet de modifier partiellement la page affichée par le fureteur pour la mettre à jour sans avoir à recharger la page entière.  Réduit la quantité d'information demandée au serveur  Fait davantage de traitement du côté client (en JavaScript) et moins sur le serveur et le réseau  Donc économie du serveur et de la bande passante GTI-780 / MTI-780 Montréal, octobre 2008
  23. 23. Survol des technologies clients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  24. 24. JavaScript & DHTML vs Machines virtuelles Outils purs JavaScript Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc. Machines virtuelles / plugiciels Sun JVM – Java Applet – JavaFX Adobe Flash – Flex – AIR Microsoft .Net – Silverlight GTI-780 / MTI-780 Montréal, octobre 2008
  25. 25. Technologies Sources Libres vs Propriétaires Sources Libres Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc. Sun JVM – Java Applet – JavaFX (?) Technologies propriétaires Adobe Flash – Flex – AIR Microsoft .Net – Silverlight GTI-780 / MTI-780 Montréal, octobre 2008
  26. 26. Survol des technologies serveurs GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  27. 27. Survol des technologies serveurs Architecture client-serveur SOA (Service Oriented Architecture) Services Web Java / JEE (servlet et/ou JSP), PHP, Ruby, Python,.NET ou un autre langage peut être utilisé du côté serveur GTI-780 / MTI-780 Montréal, octobre 2008
  28. 28. Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008

×