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

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

Présentations similaires


Présentation au sujet: "Ajax Asynchronous JavaScript And XML Réalisé par: CHOUIMA Siham BELKHADIR Imane."— Transcription de la présentation:

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

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

3 Plan Sécurité et AJAX Méthode et propriétés de XMLHttpRequest Etapes des opérations AJAX Anatomie dune application Ajax Avantages et inconvénients dAJAX Conclusion

4 Les Applications Traditionnelles Les Applications Traditionnelles

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

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

8 Applications Riches pour Internet (RIA)

9 Cest reproduire ou du moins sapprocher de lexpé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 cest 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 (gmail etc) Ruby on rails, Play, Grails Ajax4.Net Technologies des Rich Internet Application (RIA)

12 Quest-ce que 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 Un système de communication asynchrone remplace le classique modèle requête/résponse HTTP synchrone. Lutilisateur continue à utiliser lapplication pendant que le programme client requête des informations au serveur en tâche de fond ! Séparation de laffichage et de la récupération des données.

14 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

15 Qui requête ?

16 Ajax, analyse de quelques cas ré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 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 Widgets et contrôles pour interfaces utilisateurs. Cas dutilisation courants dAjax

19 Technologies dans AJAX ?

20 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

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ées dans AJAX

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

23 Anatomie dune application Ajax

24 Anatomie dune application Ajax

25 Validation de données lors de la saisie

26 Etapes des opérations AJAX

27 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. 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ément onkeyup sur le champ input dont lattribut id vaut userid. 1. Lévénement javascript est émis

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

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

31 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. Lobjet XMLHttpRequest est configuré 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"); 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 4. Lobjet XMLHttpRequest envoie une requête asynchrone

33 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 "); } } 5. La servlet ValidateServlet renvoie un document XML de réponse

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

35 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. 7. Le DOM HTML est mis à jour

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

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

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 forme dune string(NULL si la valeur de readyState est différente de 3 ou 4). getResponseHeader(headerName) Renvoie la valeur dun attribut du header de la réponse( ssi la valeur de readyState a lune des valeurs 3 ou 4). setRequestHeader(headerName,headerValue) Initialise un attribut du header de requête. Méthodes de XMLHttpRequest

40 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

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

42 Sécurité et AJAX

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

44 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

45 Avantages et inconvénients dAJAX

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 linformation et des formats utilisés pour représenter les informations. Inconvénients : Pas denregistrement dans lhistorique du navigateur des pages modiées dynamiquement. Solution en modiant la partie ancre (#) de lURL. Pas dindexation 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 dAJAX

47 Conclusion

48 Merci !


Télécharger ppt "Ajax Asynchronous JavaScript And XML Réalisé par: CHOUIMA Siham BELKHADIR Imane."

Présentations similaires


Annonces Google