Introduction à Ajax
Adapté du cours de Sang Shin, Sun
Microsystems
Plan
1.
Applications riches internet (RIA) ?
2.
Technologies possibles pour les RIAs
3.
AJAX: exemples d’applications
4.
Qu’est ce que AJAX ?
5.
Technologies utilisée par AJAX
6.
Anatomie d’un appel AJAX
7.
XMLHttpRequest Methodes & Propriétés
8.
DOM APIs et InnerHTML
9.
AJAX Sécurité
RIA c’est quoi ?
C’est reproduire ou du moins s’approcher de l’expérience
utilisateur des applications Desktop, dans une appli web
Le programme répond rapidement et intuitivement
Feedback quasi instantané
Une cellule dans un tableur change de couleur quand on passe
la souris dessus,
Un password est validé à chaque touche tapée,
Les choses se passent naturellement
Pas besoin de cliquer sur un bouton pour déclencher un
événement
Application web conventionelle
“Clique, attend que la page se ré-affiche” user interaction
Chaque communication avec le serveur implique un nouveau
rendu de la page HTML
Modèle de communication “requête/réponse”
synchrone
L’utilisateur doit attendre que la réponse revienne, il ne peut rien
faire dans la même page en attendant.
Ce modèle est “Page-driven”: le Workflow de l’application
est par page
La logique de la navigation par page est déterminée par
l’application côté serveur.
Problèmes des applis web classiques
Interruption des opérations de l’utilisateur
Il ne peut rien faire tant que la réponse n’est pas revenue
et qu’une nouvelle page est affichée,
Perte de contexte lorsque la nouvelle page
revient
Plus rien sur l’écran, ré-affichage,
Perte de la position dans la page, il faut re-scroller,
Pas de “petit feedback”, bulles, messages, aides
interactives
Contraintes de HTML
Technologies des Rich Internet
Application (RIA)
Applet, Java Web Start, Java FX
Macromedia Flash/Air
HTML5
(tags html+css+javascript)
Ajax/javascript
Silverlight (Windows only)
GWT
(gmail etc)
Ruby on rails, Play, Grails
Ajax4.Net
Google maps
On peut scroller la carte à la souris
Au lieu de cliquer sur un bouton ou quoi que ce soit…
Ceci déclenche une action sur le serveur.
En coulisse : AJAX est utilisé
Des requêtes sont envoyées en tâche de fond pour
demander de nouvelles données,
Les données arrivent de manière asynchrone et seule
une partie de la page est rafraichie.
Les autres parties de la page ne bougent pas
Pas de perte du contexte opérationnel.
Cas d’utilisation courants d’Ajax
Vérification en temps réel des données d’un
formulaire, par appel du serveur
Identificateurs, numéros de séries, codes postaux…
Plus besoin de logique de validation compliquée
impliquant de la navigation entre pages
Auto-complétion
Emails, villes, etc… peuvent être autocomplétées ou
suggérées en temps réel au fur et à mesure de la saise
Maitrise des opérations dans le détail et de la GUI
Des actions de l’utilisateur peuvent appeler des
informations plus détaillées, requêtées sur le serveur et
affichées quasi instantanément.
Widgets et contrôles pour interfaces utilisateurs
De nombreux frameworks javascript proposent des
widgets ajaxifiés évolués : menus, combobox, arbres,
tables, etc
Widgets pour faire du multi-upload de fichier avec
barres de progression,
Clients clés en main pour les web services les plus
courants : twitter, youtube, facebook, flickr, etc.
Démonstration de quelques projets
netbeans ajax basiques
Ce sont les programmes du TP1
De petits projets netbeans n’utilisant aucun
framework
Utiles pour comprendre “les bases”
Auto completion
Validation de formulaire
Barre de progression guidée par des opérations sur le
serveur
Vous allez les faire tourner et travailler dessus en
TP
Dans les prochains cours nous utiliserons des
Pourquoi AJAX?
Un système de communication
asynchrone
remplace le classique modèle requête/response
HTTP synchrone.
L’utilisateur continue à utiliser l’application pendant
que le programme client reqûete des informations au
serveur
en tâche de fond
!
Séparation de l’affichage et de la récupération des
Schéma fonctionnel
Opérations
interrompues
pendant que les
données sont
requêtées
Opérations
continuent
pendant que les
données sont
Technologies utilisées dans AJAX
Javascript
Langage de script non typé,
Une fonction javascript est appelée lorsque des événements arrivent, C’est la “glue” de toutes les opérations Ajax
DOM
Represente la structure des document XML et HTML
Possède une API pour manipuler dynamiquement (depuis JS) ces
documents
CSS
Allows for a clear separation of the presentation style from the content
and may be changed programmatically by JavaScript
XMLHttpRequest
Technologies utilisées dans AJAX
CSS
Séparation de la structure et de la présentation,
CSS a une API javascript,
CSS 3 permet animations, etc, et rapproche encore
plus des interfaces riches
XMLHttpRequest
Objet JavaScript responsible des interactions
XMLHttpRequest
Objet JavaScript
Supporté par tous les navigateurs modernes
Mozilla™, Firefox, Safari, et Opera, y compris sur
Smartphones,
Communique avec le serveur via des GET/POST
HTTP standards,
L’objet XMLHttpRequest est utilisé en tâche de fond
pour s’occuper des communications asynchrones
Pas d’interruption des interactions de l’utilisateur avec
Traitement serveur des reqêtes AJAX
Le modèle de programmation serveur ne change pas
beaucoup des applis classiques
Il reçoit des GETs/POSTs HTTP classiques,
Peut utiliser PHP, Servlets, JSP, ASP, autres…
Quelques petites différences
Peut être beaucoup plus sollicité pour de « petits travaux », par ex
invoqué à chaque touche lors d’une saisie…
Le “content type” des réponses peut être :
text/xml
text/plain
text/json
Anatomie d’une application Ajax :
interactions durant la validation lors de
la saisie dans un formulaire
Anatomie d’une application AJAX
Etapes des opérations AJAX
1.
Un événement client est émis,
2.
Un objet XMLHttpRequest est créé,
3.
L’objet XMLHttpRequest est configué,
4.
L’objet XMLHttpRequest déclenche une
requête asynchrone
5.
La servlet ValidateServlet renvoie un
document XML contenant le résultat,
6.
L’objet XMLHttpRequest appelle la fonction
callback() function et traite le résultat,
1. L’événement javascript est émis
Une fonction javascript est appelée lors de l’émission
de l’événement,
Exemple: la fonction
validateUserId()
est un “écouteur”
de l’événément
onkeyup
sur le champ input don’t
l’attribut id vaut “
userid
”.
<input type="text"
size="20"
id="
userid
"
name="id"
2. Un objet XMLHttpRequest est créé
var req;function initRequest() {
if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP"); }
}
function validateUserId() { initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value);
req.open("GET", url, true); req.send(null);
3. L’objet XMLHttpRequest est
configuré par une function de callback
var req;
function initRequest() {
if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP"); }
}
function validateUserId() { initRequest();
req.onreadystatechange = processRequest; // callback function
if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value);
req.open("GET", url, true); req.send(null);
4. L’objet XMLHttpRequest envoie une
requête asynchrone
function initRequest() {
if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP"); }
}
function validateUserId() { initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}
5. La servlet ValidateServlet renvoie
un document XML de réponse
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<valid>true</valid>"); } else { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<valid>false</valid>"); } }
6. L’objet XMLHttpRequest appelle une
fonction de callback pour traiter la réponse
L’objet XMLHttpRequest a été configuré pour
appeler la fonction
processRequest()
lorsque la
valeur de son attribut
readyState
change de
valeur :
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
7. Le DOM HTML est mis à jour
En Javascript on peut obtenir une référence sur
n’importe quel objet de la page via l’API du DOM
Voici comment on procède :
document.getElementById("userIdMessage")
, où
"userIdMessage" est l’attribut ID d’un élément du document
HTML
On va pouvoir maintenant utiliser des fonctions de l’API
du DOM pour modifier, créer ou supprimer des éléments
dans le DOM
1.
<script type="text/javascript">
2.
function setMessageUsingDOM(message) {
3.
var userMessageElement =
document.getElementById("userIdMessage")
;
4.
var messageText;
5.
if (message == "false") {
6.
userMessageElement.style.color = "red";
7.
messageText = "Invalid User Id";
8.
} else {
9.
userMessageElement.style.color = "green";
10.
messageText = "Valid User Id";
1.
var messageBody = document.createTextNode(messageText);
2.
// si l’élément messageBody existe déjà : remplacer sinon ajouter un
3.// nouvel élément
4.if (userMessageElement.childNodes[0]) {
5.userMessageElement.replaceChild(messageBody,
6.userMessageElement.childNodes[0]);
7.} else {
8.userMessageElement.appendChild(messageBody);
9.}
10.}
11.</script>
12.<body>
13.<div id="userIdMessage"></div>
14.</body>
Méthode et propriétés de
XMLHttpRequest
Les navigateurs web et le DOM
Les navigateurs web maintiennent un modèle du
document de la page,
Sous la forme d’un Document Object Model (DOM)
Directement disponible sous la forme d’un objet
document
en JavaScript.
Des APIs existent pour que JavaScript puisse
DOM APIs vs. innerHTML
Les APIs du DOM :
function setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green"; messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText); if (userMessageElement.childNodes[0]) { userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]); } else { userMessageElement.appendChild(messageBody); } }
DOM APIs vs. innerHTML
Utiliser
innerHTML
est plus facile : on peut modifier ou
récupérer des sous-arbres HTML dans le DOM
directement
function setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id";} else {
userMessageElement.style.color = "green"; messageText = "Valid User Id";
}
userMessageElement.innerHTML = messageText; }
Alors, c’est comme ça qu’on fait de
l’AJAX ?
Ajax Frameworks et Toolkits
Non, aujourd’hui on ne fait quasiment plus
d’Ajax de si bas niveau, ce cours est fait pour
“comprendre les bases”.
Les toolkits comme jQuery, Dojo, Symphony, etc
cachent la complexité de XMLHttpRequest et
simplifient l’usage des APIs du DOM
Ex : $(“userid”).html(“Utilisateur non valide”); en
AJAX Securité: côté serveur
Côté serveur, nous l’avons vu, il y a les mêmes
contraintes de sécurité que pour une application
classique,
Les moteurs Ajax des navigateurs n’autorisent que des
requêtes Ajax vers le serveur qui a servi la page
Mais de nombreux frameworks utilisent des astuces à base
de iFrame HTML pour arriver à requêter en ajax des serveurs
externes,
AJAX Securité: côté client
Le code JavaScript code est visible pour un hacker
Des techniques d’obfustication ou de compression de
code peuvent être utilisées (GWT fait cela, regardez le
code source de gmail par exemple)
Attention quand le serveur envoie du javascript qui
est est évalué sur le client (eval(…) de js)
Trou de sécurité possible,
C’es la raison pour laquelle le code javascript tourne
Utilisation d’IDEs
Eclipse ou Netbeans proposent des éditeurs
qui reconnaissent javascript,
Une application Ajax n’est pas très différente
d’une application classique côté serveur,
Il existe des “IDEs” en ligne comme
jsfiddle.net ou jsbin.com pratiques pour faire
des petits tests rapides
Debuggers JS : Firebug de Firefox, etc
A installer séparément (depuis le browser
d’extensions ou depuis le web)
