Ajax GTI780 & MTI780 ETS A09

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 ETS - Montréal - 2009

Web traditionnel – Cliquez & attendez!

GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

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


Ajax – Une véritable percée!

AJAX
Le premier à utiliser le terme AJAX
fut Jesse James Garrett en février 2005


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


Comprendre Ajax

Ajax


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 ETS - Montréal - 2009

Ajax – 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 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é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.


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 *** ETS - Montréal - 2009

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

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;
}


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("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 – 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 = "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 – Utilitaires
/* 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 – Utilitaires (suite)
/* Fonctions utilitaires du livre Head First Ajax */
/* de Brett McLaughlin chez O'Reilly Media 2006 */

function remplacerTexte(noeud, texte) {
effacerTexte(noeud);
var nouveauNoeud = document.createTextNode(texte);
noeud.appendChild(nouveauNoeud);
}
}

function effacerTexte(noeud) {
/* 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 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("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();
}
}GTI-780 / MTI-780 ETS - Montréal - 2009

Ajax – Configuration – web.xml

<?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 - Avantages & inconvénients


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 ETS - Montréal - 2009

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


Questions

?


Ajax GTI780 & MTI780 ETS A09

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (9)

Similar a Ajax GTI780 & MTI780 ETS A09

Similar a Ajax GTI780 & MTI780 ETS A09 (20)

Más de Claude Coulombe

Más de Claude Coulombe (20)

Ajax GTI780 & MTI780 ETS A09