1 / 49

Introduction à Ajax

Introduction à Ajax. Adapté du cours de Sang Shin, Sun Microsystems. Michel Buffa ( buffa@unice.fr ), UNSA 2012. Plan. Applications riches internet (RIA) ? Technologies possibles pour les RIAs AJAX: exemples d’applications Qu’est ce que AJAX ? Technologies utilisée par AJAX

blair-barton
Download Presentation

Introduction à Ajax

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012

  2. Plan Applications riches internet (RIA) ? Technologies possibles pour les RIAs AJAX: exemples d’applications Qu’est ce que AJAX ? Technologies utilisée par AJAX Anatomie d’un appel AJAX XMLHttpRequest Methodes & Propriétés DOM APIs et InnerHTML AJAX Sécurité Outils de debug JavaScript

  3. Applications Riches pour Internet (RIA)

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

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

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

  7. Technologies possibles pour les RIAs

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

  9. Ajax, analyse de quelques cas réels

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

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

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

  13. Démonstration de quelques projets netbeans ajax basiques

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

  15. Qu’est-ce que AJAX ?

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

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

  18. Qui requête ? Le navigateur web !

  19. Technologies dans AJAX ?

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

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

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

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

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

  25. Anatomie d’une application AJAX(Validation de données lors de la saisie)‏

  26. Etapes des opérations AJAX Un événement client est émis, Un objet XMLHttpRequest est créé, L’objet XMLHttpRequest est configué, L’objet XMLHttpRequest déclenche une requête asynchrone La servlet ValidateServlet renvoie un document XML contenant le résultat, L’objet XMLHttpRequest appelle la fonction callback() function et traite le résultat, Le DOM HTML de la page est mis à jour.

  27. 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();">

  28. 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); }

  29. 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); }

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

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

  32. 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 = ...; ...

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

  34. <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"; }

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

  36. Méthode et propriétés de XMLHttpRequest s

  37. AJAX : API du DOM et InnerHTML

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

  39. 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); } }

  40. 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; }

  41. Alors, c’est comme ça qu’on fait de l’AJAX ?

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

  43. Sécurité et AJAX

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

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

  46. Outils de développement

  47. Utilisation d’IDEs Eclipse ouNetbeansproposent des éditeurs qui reconnaissentjavascript, Une application Ajax n’est pas trèsdifférented’une application classiquecôtéserveur, Il existe des “IDEs” en lignecomme jsfiddle.net ou jsbin.com pratiques pour faire des petits tests rapides

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

  49. AJAX : problèmes et futur

More Related