AJAX

bracechumpInternet και Εφαρμογές Web

5 Φεβ 2013 (πριν από 4 χρόνια και 9 μήνες)

170 εμφανίσεις

Introduction à Ajax

Adapté du cours de
Sang Shin, Sun
Microsystems

Michel Buffa (
buffa@unice.fr
), UNSA 2012

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é

10.
Outils de debug JavaScript

Applications Riches pour Internet (RIA)

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


Pas de widgets riches (calendrier) etc.


Technologies possibles pour les RIAs

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

Ajax, analyse de quelques cas réels

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.

Cas d’utilisation courants d’Ajax

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
frameworks de plus haut niveau

Qu’est
-
ce que AJAX ?

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
données

Schéma fonctionnel

Opérations

interrompues

pendant que les

données sont

requêtées

Opérations

continuent

pendant que les

données sont

requêtées



Qui requête ? Le navigateur web !

Technologies dans AJAX ?

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


JavaScript object that performs asynchronous
interaction with the server

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
asynchrones avec le sserveur.

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
l’application

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


text/javascript

Anatomie d’une application Ajax :
interactions durant la validation lors de
la saisie dans un formulaire

Anatomie d’une application AJAX

(Validation de données lors de la saisie)


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,

7.
Le DOM HTML de la page est mis à jour.

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"


onkeyup="validateUserId()
;">

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


}



L’URL relatif de la servlet appelée vaut ici :
validate?id=greg

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


Le DOM est un arbre, on parlera de children, child,
nodes, etc.

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

11.

}

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

s

AJAX : API du DOM et InnerHTML

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
modifier le DOM.

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
jQuery !

Sécurité et AJAX

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,


Souvent c’est transparent pour l’utilisateur

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
dans une “sandbox”
-
> pas d’E/S sur disque, etc.

Outils de développement

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)


L’outil absolument indispensable pour faire de l’ajax


L’outil indispensable pour tout développeur web, tout
simplement !


Utiliser la console javascript de firefox


La console de debug de Chrome est pas mal
aussi mais pas encore au niveau de Firebug


Appelable avec ctrl
-
shift
-
i

AJAX : problèmes et futur