ajax asynchronous javascript and xml réalisé par: chouima siham belkhadir imane

AjaxAsynchronous JavaScript And XML

Réalisé par:

CHOUIMA Siham BELKHADIR Imane

Plan

Ajax, Analyse De Quelques Cas Réels

Technologies Possibles Pour Les RIAs

Applications Riches Pour Internet (RIA)

Les Applications Traditionnelles

Qu’est-ce que AJAX ?

Technologies dans AJAX ?

Plan

Sécurité et AJAX

Méthode et propriétés de XMLHttpRequest

Etapes des opérations AJAX

Anatomie d’une application Ajax

Avantages et inconvénients d’AJAX

Conclusion

Les Applications Traditionnelles

Les Applications Traditionnelles

Les applications web traditionnelles s´articulent sur une architecture client-serveur.

Les traitements sont réalisés sur le serveur.

Le client ne sert qu´à l´interprétation du résultat.

Par conséquent, à chaque interaction de l´utilisateur avec le client, les données sont envoyées au serveur qui enverra alors une page de résultat entièrement nouvelle à l´utilisateur.

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.

Contraintes de HTML.

Pas de widgets riches (calendrier) etc.

Problèmes des applications web classiques

Utilisation de fenêtre dépliante ou flottante.

Animation des écrans prise en charge du côté client.

Optimisation des échanges navigateur/serveur.

Communication asynchrone.

Echange des données plutôt que de la présentation.

Pas de rechargement de la page.

Technologies RIA (Rich Internet Application)

Remédier aux limites du Web "Classique"

Applications Riches pour Internet (RIA)

C’est reproduire ou du moins s’approcher de l’expérience utilisateur des applications Desktop, dans une application 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.

RIA c’est quoi ?

Technologies possibles pour les RIAs

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

Technologies des Rich Internet Application (RIA)

Qu’est-ce que AJAX ?

Définition AJAX est une acronyme signifiant Asynchronous JavaScript And XML.

Terme employé pour la 1ère fois par Jesse James GARRETT dans un article devenue célèbre intitulé « A New Approch To Web Applications », en 2005.

Un système de communication asynchrone remplace le classique modèle requête/résponse HTTP synchrone.

L’utilisateur continue à utiliser l’application pendant que le programme client requête 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 continuentpendant que les données sont requêtées

Qui requête ?

Ajax, analyse de quelques cas réels

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

Google maps

• 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

• Widgets et contrôles pour interfaces utilisateurs.

Cas d’utilisation courants d’Ajax

Technologies dans AJAX ?

Javascript :

Langage de script non typé,

Une fonction javascript est appelée lorsque des événements arrivent.

DOM :

Represente la structure des document XML et HTML. Possède une API pour manipuler dynamiquement (depuis

JS) ces documents.

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 responsable des interactions asynchrones avec le serveur.

Technologies utilisées dans AJAX

* Objet JavaScript.

* Supporté par tous les navigateurs modernes.

Mozilla™, Firefox, Safari, Google Chrome 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.

XMLHttpRequest

Anatomie d’une application Ajax

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.

Etapes des opérations AJAX

• Une fonction javascript est appelée lors de l’émission de l’événement,

• La fonction validateUserId() est un “écouteur” de l’événément onkeyup sur le champ input dont l’attribut id vaut “userid”.

<input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">

1. L’événement javascript est émis

1. L’événement javascript est émis La fonction Javascript validateUserIdest 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.

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

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; // callbac function 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

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

4. L’objet XMLHttpRequest envoie une requête asynchrone

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

5. La servlet ValidateServlet renvoie un document XML de 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 = ...;

6. L’objet XMLHttpRequest appelle une fonction de callback pour traiter la réponse

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.

7. Le DOM HTML est mis à jour

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 nouvel élément

3. if (userMessageElement.childNodes[0]) {4. userMessageElement.replaceChild(messageBody,5.

userMessageElement.childNodes[0]);6. } else {7. userMessageElement.appendChild(messageBody);8. }9. }10.</script>11.<body>12. <div id="userIdMessage"></div>13.</body>

Méthodes et propriétés de XMLHttpRequest

open(“HTTP method”, “URL”, syn/asyn)

◦ GET ou POST ?, URL à appeler, mode send(content) : Envoi de la requête au serveur. abort() : abandonne la requête en cours getAllResponseHeaders()

◦ Renvoie les headers (labels + valeurs) sous la forme d’une string(NULL si la valeur de readyState est différente de 3 ou 4).

getResponseHeader(“headerName”)

◦ Renvoie la valeur d’un attribut du header de la réponse( ssi la valeur de readyState a l’une des valeurs 3 ou 4).

setRequestHeader(“headerName”,”headerValue”)

◦ Initialise un attribut du header de requête.

Méthodes de XMLHttpRequest

onreadystatechange

◦ Prend comme valeur un écouteur du changement de l’état de la requête

readyState – Etat courant de la requête

◦ 0 = uninitialized

◦ 1 = loading

◦ 2 = loaded

◦ 3 = interactive (quelques données ont été retournées)

◦ 4 = complete

Propriétés de XMLHttpRequest

status

◦ Statut HTTP retourné :

◦ 200 = OK

◦ 500 : erreur du serveur

◦ 404 : page non trouvé

responseText

◦ Versions String de la réponse, responseXML

◦ Version XML de la réponse, statusText

◦ Texte du statut retourné par le serveur.

Propriétés de XMLHttpRequest

Sécurité et AJAX

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é Serveur

Le code JavaScript est visible pour un hacker.

◦ Des techniques de compression de code peuvent être utilisées.

Attention quand le serveur envoie du javascript qui est est évalué sur le client (eval(…) de js)◦ Trou de sécurité possible.

AJAX Securité: Côté Client

Avantages et inconvénients d’AJAX

Avantages : Plus interactivité au niveau du client. Réponse plus rapide. Réduction des transactions client/serveur (récupération des scripts et des feuilles de style une fois pour toute). Séparation des méthodes pour la transmission de l’information et des formats utilisés pour représenter les informations.

Inconvénients : Pas d’enregistrement dans l’historique du navigateur des pages modifiées dynamiquement. Solution en modifiant la partie ancre (#) de l’URL. Pas d’indexation possible des pages par les moteurs de Recherche. Si un navigateur ne supporte pas Javascript et AJAX, la page est inutilisable.

Avantages et inconvénients d’AJAX

Conclusion

Merci !