La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa UNSA

Présentations similaires


Présentation au sujet: "Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa UNSA"— Transcription de la présentation:

1 Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa UNSA

2 Plan 1. Applications riches internet (RIA) ? 2. Technologies possibles pour les RIAs 3. AJAX: exemples dapplications 4. Quest ce que AJAX ? 5. Technologies utilisée par AJAX 6. Anatomie dun appel AJAX 7. XMLHttpRequest Methodes & Propriétés 8. DOM APIs et InnerHTML 9. AJAX Sécurité 10. Outils de debug JavaScript

3 Autres technologies à voir Tookits et frameworks Ajax : jQuery et Dojo par exemple JSON (JavaScript Object Notation), les objets décrits en javascript JSF2 (framework MVC de Java EE 6), plus haut niveau que servlets/jsp Google Web Toolkit (GWT) JavaScript bien sûr, HTML5 possède > 30 APIs javascript, il faut connaitre javascript !

4 Applications Riches pour Internet (RIA)

5 RIA cest quoi ? Cest reproduire ou du moins sapprocher de lexpé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

6 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 Lutilisateur 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 lapplication est par page La logique de la navigation par page est déterminée par lapplication côté serveur.

7 Problèmes des applis web classiques Interruption des opérations de lutilisateur Il ne peut rien faire tant que la réponse nest pas revenue et quune 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.

8 Technologies possibles pour les RIAs

9 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

10 Ajax, analyse de quelques cas réels

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

12 Cas dutilisation courants dAjax Vérification en temps réel des données dun 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 s, 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 lutilisateur peuvent appeler des informations plus détaillées, requêtées sur le serveur et affichées quasi instantanément.

13 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 dutilisation courants dAjax

14 Démonstration de quelques projets netbeans ajax basiques

15 Ce sont les programmes du TP1 De petits projets netbeans nutilisant 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

16 Quest-ce que AJAX ?

17 Pourquoi AJAX? Un système de communication asynchrone remplace le classique modèle requête/response HTTP synchrone. Lutilisateur continue à utiliser lapplication pendant que le programme client reqûete des informations au serveur en tâche de fond ! Séparation de laffichage et de la récupération des données

18 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

19 Qui requête ? Le navigateur web !

20 Technologies dans AJAX ?

21 Technologies utilisées dans AJAX Javascript Langage de script non typé, Une fonction javascript est appelée lorsque des événements arrivent, Cest 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

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

23 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, Lobjet XMLHttpRequest est utilisé en tâche de fond pour soccuper des communications asynchrones Pas dinterruption des interactions de lutilisateur avec lapplication

24 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 dune saisie… Le content type des réponses peut être : text/xml text/plain text/json text/javascript

25 Anatomie dune application Ajax : interactions durant la validation lors de la saisie dans un formulaire

26 Anatomie dune application AJAX (Validation de données lors de la saisie)

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

28 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 dont lattribut id vaut userid.

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

30 3. Lobjet 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); }

31 4. Lobjet 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); } LURL relatif de la servlet appelée vaut ici : validate?id=greg

32 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(" true "); } else { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(" false "); }

33 6. Lobjet XMLHttpRequest appelle une fonction de callback pour traiter la réponse Lobjet 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 =...;...

34 7. Le DOM HTML est mis à jour En Javascript on peut obtenir une référence sur nimporte quel objet de la page via lAPI du DOM Voici comment on procède : document.getElementById("userIdMessage"), où "userIdMessage" est lattribut ID dun élément du document HTML On va pouvoir maintenant utiliser des fonctions de lAPI 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.

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

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

37 Méthode et propriétés de XMLHttpRequest s

38 Methodes de XMLHttpRequest open(HTTP method, URL, syn/asyn) GET ou POST ?, URL à appeler, mode send(content) : Envoi de la abort() : abandonne la requête en cours getAllResponseHeaders() Renvoie les headers (labels + valeurs) sous la forme dune string getResponseHeader(header) Renvoie la valeur dun attribut du header de la réponse setRequestHeader(label,value) Initialise un attribut du header de requête

39 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 status Statut HTTP retourné : 200 = OK

40 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

41 AJAX : API du DOM et InnerHTML

42 Les navigateurs web et le DOM Les navigateurs web maintiennent un modèle du document de la page, Sous la forme dun Document Object Model (DOM) Directement disponible sous la forme dun objet document en JavaScript. Des APIs existent pour que JavaScript puisse modifier le DOM.

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

44 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; }

45 Alors, cest comme ça quon fait de lAJAX ?

46 Ajax Frameworks et Toolkits Non, aujourdhui on ne fait quasiment plus dAjax 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 lusage des APIs du DOM Ex : $(userid).html(Utilisateur non valide); en jQuery !

47 Sécurité et AJAX

48 AJAX Securité: côté serveur Côté serveur, nous lavons vu, il y a les mêmes contraintes de sécurité que pour une application classique, Les moteurs Ajax des navigateurs nautorisent 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 cest transparent pour lutilisateur

49 AJAX Securité: côté client Le code JavaScript code est visible pour un hacker Des techniques dobfustication 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, Ces la raison pour laquelle le code javascript tourne dans une sandbox -> pas dE/S sur disque, etc.

50 Outils de développement

51 Utilisation dIDEs Eclipse ou Netbeans proposent des éditeurs qui reconnaissent javascript, Une application Ajax nest pas très différente dune application classique côté serveur, Il existe des IDEs en ligne comme jsfiddle.net ou jsbin.com pratiques pour faire des petits tests rapides

52 Debuggers JS : Firebug de Firefox, etc A installer séparément (depuis le browser dextensions ou depuis le web) Loutil absolument indispensable pour faire de lajax Loutil 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

53 AJAX : problèmes et futur

54 Problèmes AJAX Complexité pour faire de grosses applications Toolkits/Frameworks nombreux, lequel choisir ? Plusieurs bonnes solutions, on en reparlera. Compatibilité entre navigateurs Plus trop de problèmes avec les navigateurs récents, Gros soucis avec les anciennes versions dIE par exemple. Les Frameworks résolvent la plupart de ces problèmes

55 Futur dAJAX Javascript est à coup sûr un langage qui a de lavenir Interpréteurs de plus en plus rapide (V8, etc.) HTML5 se base sur les APIs JavaScript, Généré par de nombreux outils de haut niveau : GWT, JSF2, Play, Grails, etc. Le frameworks actuels salignent sur les évolutions (HTML5, DOM, CSS3, mobiles, etc) Flash est mal en point… les technos web sont en train de gagner la bataille.


Télécharger ppt "Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa UNSA"

Présentations similaires


Annonces Google