Ajax A synchronous J avaScript A nd X ML

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

2. 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 ? Plan Technologies dans AJAX ?

3. Anatomie d’une application Ajax Etapes des opérations AJAX Méthode et propriétés de XMLHttpRequest Sécurité et AJAX Avantages et inconvénientsd’AJAX Plan Conclusion

4. Les Applications Traditionnelles

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

6. Interruption des opérations de l’utilisateur. • Il ne peutrien faire tantque la réponsen’est pas revenue et qu’une nouvelle page estaffichée. • Perte de contextelorsque la nouvelle page revient. • Plus riensurl’écran, ré-affichage. • Perte de la position dans la page, ilfaut re-scroller. • Contraintes de HTML. • Pas de widgets riches (calendrier) etc. Problèmes des applications web classiques

7. Utilisation de fenêtre dépliante ou flottante. • Animation des écrans prise en charge du côté client. • Optimisation des échangesnavigateur/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"

8. Applications Riches pour Internet (RIA)

9. 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 couleurquand on passe la sourisdessus. • Un password estvalidé à chaquetouchetapée. • Les choses se passentnaturellement. • Pas besoin de cliquersur un bouton pour déclencher un événement. RIA c’est quoi ?

10. Technologies possibles pour les RIAs

11. Applet, Java Web Start, Java FX • Macromedia Flash/Air • HTML5 (tags html+css+javascript) • Ajax/javascript • Silverlight (Windows only) • GWT (gmailetc) • Ruby on rails, Play, Grails • Ajax4.Net Technologies des Rich Internet Application (RIA)

12. Qu’est-ceque AJAX ?

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

14. Schéma fonctionnel Opérations interrompues pendant que les donnéessont requêtées Opérations continuent pendant que les donnéessontrequêtées

15. Qui requête ?

16. Ajax, analyse de quelquescasréels

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

18. 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. Casd’utilisationcourantsd’Ajax

19. Technologies dans AJAX ?

20. Javascript : • Langage de script non typé, • Unefonctionjavascriptestappeléelorsque des événementsarrivent. DOM : • Represente la structure des document XML et HTML. • Possèdeune API pour manipulerdynamiquement (depuis JS) ces documents. Technologies utiliséesdans AJAX

21. 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éesdans AJAX

22. *Objet JavaScript. * Supporté par tous les navigateursmodernes. • Mozilla™, Firefox, Safari, Google Chrome et Opera, y comprissurSmartphones. *Communique avec le serveur via des GET/POST HTTP standards. *L’objetXMLHttpRequestestutilisé en tâche de fond pour s’occuper des communications asynchrones. • Pas d’interruption des interactions de l’utilisateur avec l’application. XMLHttpRequest

23. Anatomied’une application Ajax

24. Anatomied’une application Ajax

25. Validation de donnéeslors de la saisie

26. Etapes des opérations AJAX

27. 1. Un événement client estémis,2. Un objet XMLHttpRequestestcréé,3. L’objetXMLHttpRequestestconfigué,4. L’objetXMLHttpRequestdéclencheunerequêteasynchrone,5. La servletValidateServletrenvoie un document XML contenant le résultat,6. L’objetXMLHttpRequestappelle la fonctioncallback() function et traite le résultat,7. Le DOM HTML de la page estmis à jour. Etapes des opérations AJAX

28. Une fonction javascript est appelée lors de l’émission de l’événement, • La fonction validateUserId() est un “écouteur” de l’événémentonkeyup sur le champ input dont l’attribut id vaut “userid”. <input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();"> 1. L’événementjavascriptestémis

29. 1. L’événementjavascriptestémis La fonction JavascriptvalidateUserId 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.

30. var req; functioninitRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true; req = new ActiveXObject("Microsoft.XMLHTTP"); } } functionvalidateUserId() { 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 XMLHttpRequestestcréé

31. varreq; 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"); varurl = "validate?id=" + escape(target.value); req.open("GET", url, true); req.send(null); } 3. L’objetXMLHttpRequestestconfiguré par une function de callback

32. 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"); varurl = "validate?id=" + escape(target.value); req.open("GET", url, true); req.send(null); } L’URL relatif de la servletappeléevautici : validate?id=greg 4. L’objetXMLHttpRequestenvoieunerequêteasynchrone

33. 5. La servletValidateServletrenvoie 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>"); } }

34. 6. L’objetXMLHttpRequestappelleunefonction de callback pour traiter la réponse • L’objetXMLHttpRequest a étéconfiguré pour appeler la fonctionprocessRequest() lorsque la valeur de son attributreadyState change de valeur : function processRequest() { if (req.readyState == 4) { if (req.status == 200) { var message = ...;

35. En Javascript on peutobteniruneréférencesurn’importequel objet de la page via l’API du DOM. • Voici comment on procède : • document.getElementById("userIdMessage"), où "userIdMessage" estl’attribut ID d’un élément du document HTML. • On vapouvoirmaintenantutiliser des fonctions de l’API du DOM pour modifier, créerousupprimer des élémentsdans le DOM. • Le DOM est un arbre, on parlera de children, child, nodes, etc. 7. Le DOM HTML estmis à jour

36. <script type="text/javascript"> • function setMessageUsingDOM(message) { • varuserMessageElement = document.getElementById("userIdMessage"); • varmessageText; • if (message == "false") { • userMessageElement.style.color = "red"; • messageText = "Invalid User Id"; • } else { • userMessageElement.style.color = "green"; • messageText = "Valid User Id"; • }

37. varmessageBody = document.createTextNode(messageText); • // sil’élémentmessageBodyexiste déjà : remplacer //sinonajouter 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>

38. Méthodes et propriétés de XMLHttpRequest

39. 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 formed’une string(NULL si la valeur de readyStateestdiffé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

40. onreadystatechange • Prendcommevaleur 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 (quelquesdonnéesontétéretournées)‏ • 4 = complete Propriétés de XMLHttpRequest

41. 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 statutretourné par le serveur. Propriétés de XMLHttpRequest

42. Sécurité et AJAX

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

44. Le code JavaScript est visible pour un hacker. • Des techniques de compression de code peuventêtreutilisées. • Attention quand le serveurenvoie du javascript qui estestévaluésur le client (eval(…) de js) • Trou de sécurité possible. AJAX Securité: Côté Client

45. Avantages et inconvénientsd’AJAX

46. 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énientsd’AJAX

47. Conclusion

48. Merci !