AjaxAjax
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Sujets spéciaux en TI
Le Web 2.0 : concepts et outils
École de technologie supérieure
par
Claude Coulombe
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Web traditionnelWeb traditionnel – Cliquez & attendez! – Cliquez & attendez!
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Web traditionnelWeb traditionnel – Cliquez & attendez! – Cliquez & attendez!
* Source Clipart : http://www.clipart.com
Applications Web traditionnelles sont lentesApplications Web traditionnelles sont lentes Chargement d'une nouvelle page Chargement d'une nouvelle page
à chaque action (cycle HTTP)à chaque action (cycle HTTP) Navigateurs Web sont de simples Navigateurs Web sont de simples
terminaux HTMLterminaux HTML Basé sur le paradigme de la page Basé sur le paradigme de la page
ou documentou document Chargement séquentiel d'une séries Chargement séquentiel d'une séries
de pagesde pages
Les usagers attendent... Les usagers attendent...
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
AjaxAjax – Une véritable percée! – Une véritable percée!
AJAXAJAX
Le premier à utiliser le terme AJAXfut Jesse James Garrett en février 2005
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax (Asynchronous JavaScript & XML)Ajax (Asynchronous JavaScript & XML) Fini le pénible rechargement de pages!Fini le pénible rechargement de pages! Réalise des requêtes asynchrones au serveur Réalise des requêtes asynchrones au serveur
et fait la mise-à-jour de la page Web sans faire et fait la mise-à-jour de la page Web sans faire de chargement completde chargement complet
Applications Web plus réactives et plus Applications Web plus réactives et plus dynamiquesdynamiques
Objet XMLHttpRequest inventé par M$Objet XMLHttpRequest inventé par M$ Basé sur du code-client en JavaScriptBasé sur du code-client en JavaScript
AjaxAjax – Une véritable percée! – Une véritable percée!
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Comprendre AjaxComprendre Ajax
AjaxAjax
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Fureteur client Interface utilisateur
Moteur Ajax
HTML + CSSAppel JavaScript
Ajax – Ajax – Diagramme de collaborationDiagramme de collaboration
Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php
Serveur
Base de données, systèmes de gestion
Serveur Web
Requête HTTP
Réponse HTTP(HTML + CSS)
Application Web traditionnelleServeur
Base de données, systèmes de gestion
Serveur Web et XML / JSON/ Texte
Requête HTTP
RéponseXML / JSON / Texte
Application Web Ajax
Fureteur client Interface utilisateur
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax – Diagramme de séquence - Web traditionnelAjax – Diagramme de séquence - Web traditionnel
Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php
En mode synchrone, le fureteur est gelé en attendant la réponse du serveur.
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax – Diagramme de séquence – Application Web AjaxAjax – Diagramme de séquence – Application Web Ajax
Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php
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.
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax – Diagramme de séquenceAjax – Diagramme de séquence
Source : J.J. Garrett 2005 - http://www.adaptivepath.com/ideas/essays/archives/000385.php
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.
En mode synchrone, le fureteur est gelé en attendant la réponse du serveur.
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax – Technologies impliquéesAjax – Technologies impliquées CSS (Cascading Style Sheet) pour la présentationCSS (Cascading Style Sheet) pour la présentation API DOM (Document Object Model) pour accéder et API DOM (Document Object Model) pour accéder et
modifier les éléments de la pagemodifier les éléments de la page JavaScript pour les traitements sur le poste clientJavaScript pour les traitements sur le poste client L'objet JavaScript XMLHttpRequest* qui échange des L'objet JavaScript XMLHttpRequest* qui échange des
données XML** avec le serveur de façon données XML** avec le serveur de façon asynchrone***asynchrone***
Java (JEE), PHP, Ruby, .NET ou un autre langage peut Java (JEE), PHP, Ruby, .NET ou un autre langage peut être utilisé du coté serveurê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***
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax – Code XHTMLAjax – Code XHTML
* Source Clipart : http://www.clipart.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Test Ajax Simple</title> <!-- http://localhost:8080/ServeurAjaxSimple/testAjaxSimple.html --> <script type="text/javascript" src="ajax.js"> </script> <script type="text/javascript" src="texte-utils.js"> </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="testForm" method="get" onsubmit="return false;"> <div id="titre">Résultat de la requête</div> <br/> <!-- Zone de la page Web à rafraîchir → <div id="reponseDuServeur">0</div> <br/> <div> <input id="submitButton" type="button" value="Appeler serveur" /> </div> </form> </div> </fieldset> </body></html>
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
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com
/* 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;}
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
Ajax – Code JavaScript - Ajax – Code JavaScript - InitialisationInitialisation
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com
/* 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("Msxml2.XMLHTTP"); } catch (autreMicrosoft) { try { /* Constructeur pour autre fureteur MS IE */ requeteXHR = new ActiveXObject("Microsoft.XMLHTTP"); } catch (echec) { requeteXHR = null; } } } /* Echec de la création d'un objet XMLHttpRequest */ if (requeteXHR == null) { alert("Impossible de créer l'objet requête XMLHttpRequest!"); }}
Ajax – Code JS – Ajax – Code JS – création de l'objet XHRcréation de l'objet XHR
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com
/* 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 = "reponse" + "?parametrebidon=" + new Date().getTime(); requeteXHR.open("GET", 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("reponseDuServeur"); /* 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("*** Erreur! Le statut de la requête est : " + requeteXHR.status); } }}
Ajax – Code JS – Ajax – Code JS – Appel & CallbackAppel & Callback
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com
/* Fonctions utilitaires du livre Head First Ajax *//* de Brett McLaughlin chez O'Reilly Media 2006 */
function getTexte(noeud) { var texte = ""; 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;}
Ajax – Code JS – Ajax – Code JS – UtilitairesUtilitaires
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com
/* 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); } } }}
Ajax – Code JS – Ajax – Code JS – Utilitaires (suite)Utilitaires (suite)
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com
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("text/html"); 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(); }}
Ajax – Code Java – Ajax – Code Java – ServletServlet
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com
<?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <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>
Ajax – Configuration – Ajax – Configuration – web.xmlweb.xml
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax - Ajax - Avantages & inconvénientsAvantages & inconvénients
* Source Clipart : http://www.clipart.com
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax - InconvénientsAjax - Inconvénients Effet « buzzword »Effet « buzzword » Problèmes de compatibilité entre les différents fureteursProblèmes de compatibilité entre les différents fureteurs Ne fonctionne pas si JavaScript est désactivéNe fonctionne pas si JavaScript est désactivé Les données chargées de façon dynamique ne sont pas Les données chargées de façon dynamique ne sont pas
indexées par les moteurs de rechercheindexées par les moteurs de recherche Si le traitement du côté serveur est long, le traitement Si le traitement du côté serveur est long, le traitement
asynchrone d'Ajax fait que les changements se font avec un asynchrone d'Ajax fait que les changements se font avec un délaidélai
Le bouton de retour en arrière, l'URL ne change pas et les Le bouton de retour en arrière, l'URL ne change pas et les signets ne fonctionnent passignets ne fonctionnent pas
Pas d'accès* en dehors du domaine du serveurPas d'accès* en dehors du domaine du serveur Plus exigeant sur le poste client (vieux PC ?) Plus exigeant sur le poste client (vieux PC ?)
* Note : En anglais « Same Origin Policy »
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
Ajax - AvantagesAjax - Avantages Réponses rapides aux actions de l'utilisateurRéponses rapides aux actions de l'utilisateur
Applications Web riches, rapides et légèresApplications Web riches, rapides et légères
Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation
Permet de modifier partiellement la page affichée par le Permet de modifier partiellement la page affichée par le
fureteur pour la mettre à jour sans avoir à recharger la page fureteur pour la mettre à jour sans avoir à recharger la page
entière.entière.
Réduit la quantité d'information demandée au serveurRéduit la quantité d'information demandée au serveur
Fait davantage de traitement du côté client (en JavaScript) Fait davantage de traitement du côté client (en JavaScript)
et moins sur le serveur et le réseauet moins sur le serveur et le réseau
Donc économie du serveur et de la bande passanteDonc économie du serveur et de la bande passante
ETS - Montréal - 2009ETS - Montréal - 2009GTI-780 / MTI-780GTI-780 / MTI-780
QuestionsQuestions
??
* Source Clipart : http://www.clipart.com