Ajax Asynchronous JavaScript And XML Réalisé par: CHOUIMA Siham BELKHADIR Imane

Plan Les Applications Traditionnelles Applications Riches Pour Internet (RIA) Technologies Possibles Pour Les RIAs Ajax, Analyse De Quelques Cas Réels Qu’est-ce que AJAX ? Technologies dans AJAX ?

Plan Anatomie d’une application Ajax Sécurité et AJAX Etapes des opérations AJAX Méthode et propriétés de XMLHttpRequest Sécurité et 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.

Problèmes des applications 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. Contraintes de HTML. Pas de widgets riches (calendrier) etc.

Remédier aux limites du Web "Classique" 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)

Applications Riches pour Internet (RIA)

RIA c’est quoi ? Feedback quasi instantané. 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.

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

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 continuent 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 ?

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 Widgets et contrôles pour interfaces utilisateurs.

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

* Communique avec le serveur via des GET/POST HTTP standards. XMLHttpRequest * 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.

Anatomie d’une application Ajax

Anatomie d’une application Ajax

Validation de données lors de la saisie

Etapes des opérations 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, 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, 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 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.

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

<script type="text/javascript"> 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); // si l’élément messageBody existe déjà : remplacer //sinon ajouter un nouvel élément if (userMessageElement.childNodes[0]) { userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]); } else { userMessageElement.appendChild(messageBody); } </script> <body> <div id="userIdMessage"></div> </body>

Méthodes et propriétés de XMLHttpRequest

Méthodes 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.

Propriétés 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.

Sécurité et AJAX

AJAX Securité: Côté Serveur 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 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.

Avantages et inconvénients d’AJAX

Avantages et inconvénients d’AJAX 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.

Conclusion

Merci !