Introduction à Ajax Web 2.0 - Les pages perso du LIG
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Web 2.0 Introduction à Ajax Philippe Genoud - UJF (c) - Février 2015 1
Caractéristiques des
applications Web "Classiques"
• Navigateur outil générique d'affichage : il n'a aucune intelligence de
l'application
• Logique de navigation sous forme d'enchaînement de pages est
déterminée par le serveur.
1 requête http
2
HTML/hhtp
Interaction 4 requête http Le serveur
de l'utilisateur 5 génère une
6 nouvelle page
3
HTML/http
5' Client Serveur
communication
"requête/réponse"
synchrone
L'utilisateur doit attendre la Le serveur doit effectuer un
réponse du serveur rafraîchissement complet des
pages à chaque interaction de
l'utilisateur
Philippe Genoud - UJF (c) - Février 2015 2
Limites des
applications Web "Classiques"
• Ergonomie en retrait
– Contrainte par HTML
• Ensemble limité de widgets
– Pas de retour immédiat aux activités de l'utilisateur
• L'utilisateur doit attendre la page suivante générée par le serveur
– Interruption des activités de l'utilisateur
• L'utilisateur ne peut effectuer d'autres opérations pendant qu'il attend
une réponse
– Perte du contexte opérationnel suite au rafraîchissement
• Perte de la position de scrolling dans la page
• Le cerveau doit réanalyser entièrement toute nouvelle page
Philippe Genoud - UJF (c) - Février 2015 3
Remédier aux limites du Web "Classique"
• Animation des écrans prise en charge du côté client
– Animation d'un écran assurée par du code exécuté sur le navigateur
limite les échanges navigateur/serveur web
possibilité d'augmenter l'interactivité et de réaliser des comportements
ergonomiques plus évolués
• Optimisation des échanges navigateur/serveur
– Communication asynchrone
• Lorsqu'une requête est émise par le client, celui-ci reprend la main
immédiatement
– Echange des données plutôt que de la présentation (une fois la page
initiale chargée)
Technologies RIA (Rich Internet Application)
Web 2.0 versus Web 1.0
Philippe Genoud - UJF (c) - Février 2015 4
Exemples de sites web 2.0
Google maps
http://www.digg.com/
http://www.lastfm.fr
http://www.flickr.com/
Philippe Genoud - UJF (c) - Février 2015 5
Technologies RIA (Rich Internet Applications)
• De nombreuses technologies (pas toutes récentes)
– Applets (1995)
• Code java
– DHTML (Dynamic HTML)
• Javascript (1995) + DOM + CSS
– Flash/FLEX (1996, 2004) Macromedia-Adobe
Technologie anciennes :
• MXML + ActionScript Javascript 1995
XmlHttpRequest : 1999 dans IE5
– Silverligth (2006) Microsoft
• XAML + ECMACScript Ce qui est nouveau est leur
utilisation conjointe
– JavaFX (2008) Sun …
– AJAX : Asynchronous Javascript And XML
• AJAX = Javascript + XmlhttpRequest
– Code client écrit en Javascript
– Communications avec le serveur réalisées à l'aide de l'objet Javascript
XmlhttpRequest
Philippe Genoud - UJF (c) - Février 2015 6
Technologies utilisées en AJAX
AJAX = Javascript + XmlhttpRequest
plus précisément
AJAX = DHTML (DOM + CSS + Javascript) + XmlhttpRequest
• Javascript
– Langage de script orienté objet et faiblement typé
– Fonctions javascript invoquées lorsque intervient un événement sur la page
– "Glue" pour tout le fonctionnement d'AJAX
• DOM (Document Object Model)
– API pour accéder à des documents structurés
– Représente la structure de documents XML et HTML
• CSS (Cascading Style Sheets)
– Permet un séparation claire du contenu et de la forme de la présentation
– Peut être modifié par le code Javascript
• XmlhttpRequest
– Objet Javascript qui assure une interaction asynchrone avec le serveur
Philippe Genoud - UJF (c) - Février 2015 7
Application Web AJAX
• Une partie de l'intelligence fonctionnelle de l'application est déportée
vers le navigateur
1er échange similaire au web "classique" : le serveur envoie une page au
client mais en y embarquant de l'intelligence (code javascript)
1 requête http
2
HTML/hhtp
+
javascript
Client Serveur
Philippe Genoud - UJF (c) - Février 2015 8
Application Web AJAX
• Une partie de l'intelligence fonctionnelle de l'application est déportée
vers le navigateur
Certaines requêtes de
Interaction
l'utilisateur sont traitées
de l'utilisateur 4
localement par le
3 navigateur grâce à la
couche d'intelligence qui
accompagne la présentation
Client Serveur
Philippe Genoud - UJF (c) - Février 2015 9
Application Web AJAX
• Une partie de l'intelligence fonctionnelle de l'application est déportée
vers le navigateur
D'autres requêtes nécessitent l'interrogation du serveur
Mise à jour de
la description
9 de la page
(Arbre DOM)
8 true
HTML XML javascript
Interaction (JSON) Le serveur
de l'utilisateur
requête http 7 génère une
5 réponse
6 Requête
transmise au
serveur communication
Client et la main est asynchrone Serveur
rendue à
l'utilisateur
en attendant
le retour des
données
Philippe Genoud - UJF (c) - Février 2015 10Modèles des applications WEB
Navigateur client
Application Application
Interface utilisateur
Web "classique" Web AJAX
appel
Javascript HTML + CSS
Navigateur client
Ajax engine
interface utilisateur
requête HTTP requête HTTP
transport http(s) transport http(s)
HTML + CSS XML
Serveur web Serveur web
datastores, backend datastores, backend
processing, legacy systems processing, legacy systems
Systèmes coté serveur Systèmes coté serveur
communication synchrone Client communication asynchrone
Client activité
activité de l'utilisateur activité de l'utilisateur de l'utilisateur
temps traitement
coté client
temps
traitement serveur traitement serveur
Serveur
traitement serveur traitement serveur traitement serveur
Serveur
Philippe Genoud - UJF (c) - Février 2015 11Modèles des applications WEB
Animation IHM
Affichage
(ex Servlets – Struts)
Application Web (HTML + CSS)
"classique" Présentation
(ex JSP)
Logique métier
(ex Java Beans)
• Peu de javascript
• Charge serveur très importante
• Ergonomie faible
Application Web
AJAX Léger
• Cohabitation entre
technologie "classique"
(ASP, PHP, JSP) et AJAX Serveur
• Charge serveur importante Utilisateur Client
Animation IHM client
• Ergonomie améliorée (JavaScript)
Application Web Logique métier
(ex Java Beans)
AJAX complet
• Client en javascript
• Charge serveur modérée Affichage
• Ergonomie supérieure (HTML + CSS + Présentation Animation IHM
DOM) (DOM + JavaScript) serveur (Java)
Philippe Genoud - UJF (c) - Février 2015 12Anatomie d'une interaction AJAX
• Exemple d'après : AJAX Basics and Development Tools de Sang Shin
(sang.shin@sun.com, Sun Microsystems) www.javapassion.com/ajaxcodecamp
L'utilisateur
saisit un
identifiant
Au fur et à mesure de la frappe
un message indiquant la validité ou
non de l'identifiant est affiché
Le bouton de création n'est
activé que si l'identifiant est
valide (n'est pas déjà utilisé)
Philippe Genoud - UJF (c) - Février 2015 13Anatomie d'une interaction AJAX
1 Événement sur le client
appel d'une fonction
javascript
2 Création et configuration
d'un objet XMLHttpRequest
3 L' objet XMLHttpRequest fait
une requête asynchrone
false
4 Le servlet valide l'identifiant
soumis
5 Le servlet retourne un
document XML contenant le
résultat de la validation
6
L'objet XMLHttpRequest
appelle la fonction callback()
et traite ce résultat
7 Mise à jour de la page
HTML (DOM)
Philippe Genoud - UJF (c) - Février 2015 14Anatomie d'une interaction AJAX
1 Gestion des événements dans le formulaire HTML
La fonction Javascript validateUserId
est associée au champ de saisie de texte
"userid" pour la gestion des événements
de type onkeyup : validateUserId est
appelée chaque fois que l'utilisateur
tape une lettre dans le champ de saisie.
L'élément div d'id userIdMessage spécifie la position où
sera affiché le message de validation de l'entrée
Philippe Genoud - UJF (c) - Février 2015 15Anatomie d'une interaction AJAX
1 Événement sur le client
appel d'une fonction
javascript
2 Création et configuration
d'un objet XMLHttpRequest
3 L' objet XMLHttpRequest fait
une requête asynchrone
false
4 Le servlet valide l'identifiant
soumis
5 Le servlet retourne un
document XML contenant le
résultat de la validation
6
L'objet XMLHttpRequest
appelle la fonction callback()
et traite ce résultat
7 Mise à jour de la page
HTML (DOM)
Philippe Genoud - UJF (c) - Février 2015 16Anatomie d'une interaction AJAX
Coté client :
la fonction JavaScript invoqué à chaque événement Création et configuration d'un
"keyup"sur le champ de saisie 2 objet XMLHttpRequest
var req; Selon le navigateur l'objet
XMLHttpRequest est crée différemment
function validateUserId() {
fonction callback : fonction
if (window.XMLHttpRequest) { Javascript (voir plus loin) qui sera
req = new XMLHttpRequest(); invoquée lorsque le serveur aura fini de
} else if (window.ActiveXObject) { traiter la requête :
isIE = true; En Javascript les fonctions sont des
req = new ActiveXObject("Microsoft.XMLHTTP"); objets et peuvent être manipulées en
} tant que tels
req.onreadystatechange = processRequest; Récupération de la valeur userid tapée par
l'utilisateur (via API DOM)
if (!target)
target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value); et construction de l'url du composant
serveur qui sera invoqué
req.open("GET", url, true);
L'appel sera asynchrone
}
Philippe Genoud - UJF (c) - Février 2015 17Anatomie d'une interaction AJAX
1 Événement sur le client
appel d'une fonction
javascript
2 Création et configuration
d'un objet XMLHttpRequest
3 L' objet XMLHttpRequest fait
une requête asynchrone
false
4 Le servlet valide l'identifiant
soumis
5 Le servlet retourne un
document XML contenant le
résultat de la validation
6
L'objet XMLHttpRequest
appelle la fonction callback()
et traite ce résultat
7 Mise à jour de la page
HTML (DOM)
Philippe Genoud - UJF (c) - Février 2015 18Anatomie d'une interaction AJAX
Coté client :
la fonction JavaScript invoqué à chaque événement Création et configuration d'un
"keyup"sur le champ de saisie 2 objet XMLHttpRequest
var req; Selon le navigateur l'objet
XMLHttpRequest est crée différemment
function validateUserId() {
fonction callback : fonction
if (window.XMLHttpRequest) { Javascript (voir plus loin) qui sera
req = new XMLHttpRequest(); invoquée lorsque le serveur aura fini de
} else if (window.ActiveXObject) { traiter la requête :
isIE = true; En Javascript les fonctions sont des
req = new ActiveXObject("Microsoft.XMLHTTP"); objets et peuvent être manipulées en
} tant que tels
req.onreadystatechange = processRequest; Récupération de la valeur userid tapée par
l'utilisateur (via API DOM)
if (!target)
target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value); et construction de l'url du composant
serveur qui sera invoqué
req.open("GET", url, true);
L'appel sera asynchrone
req.send(null); 3 L' objet XMLHttpRequest effectue une requête asynchrone
}
Philippe Genoud - UJF (c) - Février 2015 19Anatomie d'une interaction AJAX
1 Événement sur le client
appel d'une fonction
javascript
2 Création et configuration
d'un objet XMLHttpRequest
3 L' objet XMLHttpRequest fait
une requête asynchrone
false
4 Le servlet valide l'identifiant
soumis
5 Le servlet retourne un
document XML contenant le
résultat de la validation
6
L'objet XMLHttpRequest
appelle la fonction callback()
et traite ce résultat
7 Mise à jour de la page
HTML (DOM)
Philippe Genoud - UJF (c) - Février 2015 20Anatomie d'une interaction AJAX
Coté Serveur :
la servlet traitant la requête GET émise par la fonction
JavaScript validateUuserId
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException {
Le servlet valide
String targetId = request.getParameter("id"); 4
l'identifiant soumis
if ((targetId != null) &&
LoginManager.validateUserId(targetId.trim())) { S'agit-il d'un identifiant déjà utilisé ?
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("true");
} else { Le servlet retourne
5
un document XML
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache"); contenant le résultat
response.getWriter().write("false"); de la validation
}
}
true false
Philippe Genoud - UJF (c) - Février 2015 21Anatomie d'une interaction AJAX
1 Événement sur le client
appel d'une fonction
javascript
2 Création et configuration
d'un objet XMLHttpRequest
3 L' objet XMLHttpRequest fait
une requête asynchrone
false
4 Le servlet valide l'identifiant
soumis
5 Le servlet retourne un
document XML contenant le
résultat de la validation
6
L'objet XMLHttpRequest
appelle la fonction callback()
qui traite ce résultat
7 Mise à jour de la page
HTML (DOM)
Philippe Genoud - UJF (c) - Février 2015 22Anatomie d'une interaction AJAX
Coté client :
6 L'objet XMLHttpRequest appelle la fonction callback() et traite ce résultat
function processRequest() { Cette fonction est invoquée chaque fois que le champ
readyState de l'objet XMLHttpRequest est modifié
if (req.readyState == 4) {
readyState == 4 et status = 200 indiquent que la
if (req.status == 200) { réponse a été correctement reçue par le client
var message = req.responseXML.
Extraction de la valeur true ou false des
getElementsByTagName("valid")[0].
données retournées par le serveur
childNodes[0].nodeValue;
false
7 Mise à jour de la page HTML (DOM)
setMessageUsingDOM(message); Affiche dans la zone prévue à cet effet la validité ou
non de l'identificateur fourni
var submitBtn = document.getElementById("submit_btn");
if (message == "false") {
submitBtn.disabled = true;
} else { Active ou désactive le bouton de
submitBtn.disabled = false; soumission du formulaire selon validité
} de l'identificateur fourni
}
}
}
Philippe Genoud - UJF (c) - Février 2015 23Anatomie d'une interaction AJAX
7 Mise à jour de la page HTML (DOM)
Invalid User Id
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
Récupération de l'objet DOM
var messageText; correspondant à la zone du message
if (message == "false") { grâce à l'id inséré dans le code HTML
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else { Préparation du message
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText); Création du message
Si il existe déjà un
if (userMessageElement.childNodes[0]) { message le remplace
par le nouveau, sinon
userMessageElement.replaceChild( le rajoute
messageBody, userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
Philippe Genoud - UJF (c) - Février 2015 24Comment faire de l'AJAX ?
• Une multitude de solutions pour faire de l'AJAX. Plus de 210
outils dénombrés en mai 2007
(source http://ajaxian.com/archives/210-ajax-frameworks-and-counting)
Pure Javascript Server-Side
Multipurpose 37 4D 1
Remoting 19 C++ 1
Graphics and Effects 6 Coldfusion 4
Flash 3 Eiffel 0
Logging 5 DotNet (+ASP/C*) 19
XML 6 Java 44
Specialised 3 Lisp 1
Subtotal 79 Lotus Notes 2
Multi-Language 11
Perl 2
Moralité : PHP 38
Python 5
"If you’re still rolling your own XMLHttpRequests
Ruby 1
or visual effects, now might be a good time to start
Smalltalk 1
investigating the alternatives".
Tcl 1
Michael Mahemoff , Ajaxian, mai 2007
Subtotal 131
Philippe Genoud - UJF (c) - Février 2015 25Développer en AJAX
• L'une des diffcultés d'AJAX est le développement Javascript
– Test et débogage pas toujours facile Il faut
maîtriser les
• Les choses se sont grandement amélioré grâce à outils
– des plugins tels FireBug
Il faut limiter
– et maintenant aux outils de développement intégrés aux l’écriture de
navigateurs JavaScript de
bas niveau
– Portabilité difficile, il faut différentes versions des fonctions
selon les navigateurs
• 1ère solution : utilisation des bibliothèques javascript
– Prototype, Script.aculo.us, DOJO, Yahoo UI, JQuery
• 2ème solution : Utilisation des bibliothèque de tags, composants Struts ou
JSF "ajaxifiés"
– Les composants génèrent du javascript (AjaxTags, AjaxAnywhereRichFace,
ajax4JSF, IceFaces…)
• 3ème solution : traduction d'un langage en Javascript
– GWT (Google Web Toolkit) java javascript
Philippe Genoud - UJF (c) - Février 2015 26Vous pouvez aussi lire
