ajax - gti780 & mti780 - ets - a08

AjaxAjax

Montréal, octobre 2008Montréal, octobre 2008GTI-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


Web traditionnelWeb traditionnel – Cliquez & attendez! – Cliquez & attendez!

* Source Clipart : http://www.clipart.com


Web traditionnelWeb traditionnel – Cliquez & attendez! – Cliquez & attendez!


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...


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



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!


Comprendre AjaxComprendre Ajax

AjaxAjax



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


Ajax – Diagramme de séquence - Web traditionnelAjax – Diagramme de séquence - Web traditionnel


En mode synchrone, le fureteur est gelé en attendant la réponse du serveur.


Ajax – Diagramme de séquence – Application Web AjaxAjax – 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.


Ajax – Diagramme de séquenceAjax – Diagramme de séquence


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.


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***


Ajax - Ajax - Avantages & inconvénientsAvantages & inconvénients


Ajax – Code XHTMLAjax – Code XHTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Test Ajax Simple</title>  <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>  <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

Montréal, octobre 2008Montréal, octobre 2008GTI-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


/* 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


/* 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


/* 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


/* 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)


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

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

http://java.sun.com/xml/ns/j2ee


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 »


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


Survol des technologies clientsSurvol des technologies clients



Outils purs JavaScript Outils purs JavaScript

Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc.Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc.

Machines virtuelles / plugicielsMachines virtuelles / plugiciels

Sun JVM – Java Applet – JavaFXSun JVM – Java Applet – JavaFX

Adobe Flash – Flex – AIRAdobe Flash – Flex – AIR

Microsoft .Net – SilverlightMicrosoft .Net – Silverlight

JavaScript & DHTML vs Machines virtuelles JavaScript & DHTML vs Machines virtuelles


Sources Libres Sources Libres

Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc.Scriptaculous, Prototype, DWR, jQuery, YUI, GWT, etc.

Sun JVM – Java Applet – JavaFX (?)Sun JVM – Java Applet – JavaFX (?)

Technologies propriétairesTechnologies propriétaires

Adobe Flash – Flex – AIRAdobe Flash – Flex – AIR

Microsoft .Net – SilverlightMicrosoft .Net – Silverlight

Technologies Sources Libres vs PropriétairesTechnologies Sources Libres vs Propriétaires


Survol des technologies serveursSurvol des technologies serveurs



Survol des technologies serveursSurvol des technologies serveurs

Architecture client-serveurArchitecture client-serveur

SOA (Service Oriented Architecture) SOA (Service Oriented Architecture)

Services WebServices Web

Java / JEE (servlet et/ou JSP), PHP, Ruby, Python,.NETJava / JEE (servlet et/ou JSP), PHP, Ruby, Python,.NET

ou un autre langage peut être utilisé du côté serveurou un autre langage peut être utilisé du côté serveur


QuestionsQuestions

??


ajax - gti780 & mti780 - ets - a08

Technology