Your SlideShare is downloading. ×
0
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Ajax - GTI780 & MTI780 - ETS - A08
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax - GTI780 & MTI780 - ETS - A08

929

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
929
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. Web traditionnel – Cliquez & attendez! GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  • 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. 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. 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. Comprendre Ajax Ajax GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  • 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. 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. 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. 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. 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. Ajax - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Survol des technologies clients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  • 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. 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. Survol des technologies serveurs GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008
  • 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. Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com Montréal, octobre 2008

×