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
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
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
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ésultat de la requê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
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