1 / 37

AJAX et les langages serveurs

AJAX et les langages serveurs. Exposé de système et réseaux Informatique et Réseaux - 3ème année – Mars 2007 Maxime Diawara. J’ai vraiment dis AJAX?. Club de football néerlandais basé à Amsterdam. 29 fois Champion des Pays-Bas. 4 fois vainqueur de la Ligue des champions.

claral
Download Presentation

AJAX et les langages serveurs

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. AJAX et les langages serveurs Exposé de système et réseaux Informatique et Réseaux - 3ème année – Mars 2007 Maxime Diawara

  2. J’ai vraiment dis AJAX? Club de football néerlandais basé à Amsterdam. 29 fois Champion des Pays-Bas. 4 fois vainqueur de la Ligue des champions. A accueilli de superbes joueurs tels que: Johan Cruyff & Edgar Davids Célèbre marque de produits ménager. Capable de laver plus blanc que blanc? Mythologie Grecque, Guerre de Troie, Ajax le grand, détail d'une amphore athénienne à figures noires d'Exékias, v. 540-530 av. J.-C. Ajax et les langages serveurs

  3. Table des matières • Asynchronous Java And Xml • Présentation • Technologies mises en jeu • Présentation des données • Interaction • Transfert • Parcours et mise en forme des données • Langages serveurs • Formatage des données • Transfert de responsabilité • Framework • Création automatique de requêtes • Autocomplétion • Développement Ajax et les langages serveurs

  4. Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin La dénomination AJAX Asynchronous Javascript And Xml Article de Jesse James Garett le 18 février 2005 « C’est un ensemble de technologies différentes utilisées ensemble pour optimiser l’échange d’informations entre les navigateurs Web et les serveurs. » Le WEB 2 Ajax et les langages serveurs

  5. Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin On travaille toujours sur une même page Découper une page web en différentes zones d’affichage Mettre à jour uniquement les zones modifiées On réduit le nombre d’informations transmises par rapport au rechargement total de la page. Informer l’utilisateur des changements en cours Gérer les états « précédent » & « suivant » Qu’est-ce que c’est? Ajax et les langages serveurs

  6. Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  7. Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  8. Comment ça marche? Les technologies mises en jeu • XHTML & CSS Structure de la page • Javascript Interagir entre les éléments • XMLHttpRequest Transfert des données • XML, XSLT & DOM Parcours des données • JSON Mise en forme des données • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  9. Présentation des données - 1 XHTML HyperText Markup Languagebasé sur XML • Langage à balises utilisé pour écrire des pages du World Wide Web. • Toutes les balises sont fermées, écrites en minuscules et les attributs renseignés entre double-côtes. • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin <table background= "url/img.png" border= "1"> <tr bgcolor= "#fff000"> <td width="50px"></td> </tr> </table> Ajax et les langages serveurs

  10. Présentation des données - 2 CSS Cascading Style Sheets • Feuilles de style utilisées pour définir la présentation d’un document structurés (XHTML par exemple). • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin table { background-image: url("url/img.png"); border: 1px solid black; } tr{ background-color: #fff000; } Ajax et les langages serveurs

  11. Mode sans ajax • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  12. Le découpage de la page <div> La balise à tout faire </div> • Les balises DIV possèdent un attribut ID • Leur contenu est modifiable via cet ID • Elles peuvent encapsuler toutes les autres balises • Le but est donc de découper la page en différentes <div> et de modifier leur contenu via leur ID • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin <div id="1">contenu</div> Ajax et les langages serveurs

  13. Le découpage de la page • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  14. L’interaction avec le serveur JavaScript • C’est un langage de programmation de type script, orienté objet, basé sur Java, très utilisé sur le Web. • On l’utilise pour émettre des requêtes vers le serveur et modifier le contenu des balises <div>. • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin function upDate(id, valeur){ document.getElementById(id).innerHTML = valeur; } Ajax et les langages serveurs

  15. Le transfert des données • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  16. L’Objet XMLHttpRequest XMLHttpRequest • Objet Javascript • Réalise des requêtes vers le serveur web. • Utilise les mêmes paramètres que la balise XHTML <form> • On l’utilise principalement de façon Asynchrone • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  17. L’envoi d’une requête GET Utilisation de l’objet XMLHttpRequest • url : chemin vers le fichier à consulter • url :requête HTTP http://myajax.fr?param=value • false :mode Asynchrone • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin var requete_ajax = getHttpRequest(); requete_ajax.open('GET', ‘url', false); requete_ajax.send(null); Ajax et les langages serveurs

  18. Création de l’Objet XMLHttpRequest Mozilla Firefox • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin function getHttpRequest() { var http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } if (!http_request) { alert('Impossible de créer une instance XMLHTTP'); } return http_request; } Ajax et les langages serveurs

  19. Création de l’Objet Msxml2.XMLHTTP Internet Explorer • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin function getHttpRequest() { var http_request = false; if (window.ActiveXObject) { // IE try {http_request = new ActiveXObject("Msxml2.XMLHTTP");} catch (e){ try {http_request = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {} }} if (!http_request) { alert('Impossible de créer une instance XMLHTTP'); } return http_request; } Ajax et les langages serveurs

  20. Traitement des données Utilisation des données XML • Fichiers XML parsés et mis sous forme arbre • Manipulation avec DOM • On peut traiter les données avec un moteur XSLT • Faire des sélections dans les nœuds avec XPATH • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  21. Traitement des données Les données XML • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin var xmlData = null; if (window.XMLHttpRequest) { //Firefox xmlData = requete_ajax.responseXML; }else if (window.ActiveXObject) { //IE xmlData = new ActiveXObject("Microsoft.XMLDOM"); xmlData.loadXML(requete_ajax.responseText); } Récupérer le tableau des éléments des balises <info> xmlData.getElementsByTagName('info') Récupérer le contenu de la première balise <info> xmlData.getElementsByTagName('info')[0].firstChild.data; Ajax et les langages serveurs

  22. Traitement des données Les données JSON • JavaScript Object Notation (XML en texte) • Peut contenir du code javascript • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin { Info:'chargement en cours…', Site:'myajax.fr' } textData = eval('('+requete_ajax.responseText+')'); $(‘id').innerHTML = textData .Info; Ajax et les langages serveurs

  23. Démo simple d’AJAX • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  24. Envoi d’une requête Post POST • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin function sendData(id){ $(' infoUser').innerHTML = 'connexion au serveur'; var request_ajax = getHttpRequest(); request_ajax.onreadystatechange = function() { onResult(request_ajax); }; request_ajax.open('POST', « Context/Servlet", true); request_ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); var data = ‘id =‘+id; request_ajax.send(data); } Ajax et les langages serveurs

  25. Envoi d’une requête Post Requête & information de l’utilisateur • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin function onResult(request_ajax) { if (request_ajax.readyState == 4) { if (request_ajax.status == 200) { $(‘infoUser').innerHTML = ''; } } } Ajax et les langages serveurs

  26. Ajax & JSP A quoi peut servir l’emploi d’une JSP et d’AJAX? • Formater les données transmises au client • Avoir accès aux données du serveur sans recharger la page • Utiliser les variables de session en mode asynchrone • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  27. Emploi des JSP pour écrire en JSON <jsp:directive.page import="java.util.ArrayList" /> <jsp:directive.page import="fr.umlv.ajax.Entity;"/> <jsp:useBean id="infos" type="ArrayList<Entity>" scope="session" /> { Val[{ <%for (Entity entity : entities){%> val:"<%=entity.val%>", <%}%> }], Infos[{ <%for (Entity entity : entities){%> info:"<%=entity.info%>", <%}%> }] } • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  28. Analyse des données récupérées Création du code HTML mis à jour • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin requete_ajax.open('GET', 'data/infos.jsp', false); … data = eval('('+requete_ajax.responseText+')'); var html = "<select size=1 onChange=\"\">"; for(var i=0; i<data.Infos.length; i++){ html+="<option value=\""+data.Val[i]+"\">"+data.Infos[i]+"</option>"; } html+="</select>"; $(‘Div1').innerHTML = html; Ajax et les langages serveurs

  29. Code généré Ajax & Jsp Création d’une liste déroulante • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin <select size=1 onChange=" "> <option value="VAL">INFO<option/> … <select/> Ajax et les langages serveurs

  30. Démo JSP • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  31. Ajax & ASP Permettre l’accès à un serveur distant • Certains navigateurs interdisent les connexions distantes en Ajax • On peut alors créer un Proxy sur le serveur local • Ajax interroge le proxy qui interroge le serveur distant • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  32. Démo Proxy ASP • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  33. Ajax clefs en main Les Frameworks • Langage de haut niveau utilisant AJAX • Ne nécessite pas de connaître AJAX • Possède ses propres méthodes et objets • Rend le traitement automatique • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs

  34. Le Framework Prototype Création automatique de requêtes • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin new Ajax.Request(‘URL',{ parameters: ‘id='+id, method: 'get', onSuccess: showResponse }); function showResponse(req){ data = req.responseXML; … } Ajax et les langages serveurs

  35. Le Framework Scriptaculous La star des Frameworks • Drag and Drop • Autocomplétion • Utilise Prototype • Possède ses propres librairies • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Vous reprendrez bien d’une petite démo?? Ajax et les langages serveurs

  36. Les outils pour aller plus loin… Quelques IDE et technologies AJAX • Eclipse avec Rich Ajax Project – release n°1 06/2007 http://www.eclipse.org/rap/ • Plugin Echo studio http://www.eclipseplugincentral.com/displayarticle253.html • Java Server Faces http://java.sun.com/javaee/javaserverfaces/ • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Bibliographie & sources: - Ajax le guide complet – Micro Application - http://fr.wikipedia.org/ - UMLV – Projet GL IR3 - Hawaii Team Ajax et les langages serveurs

  37. Questions ??? Merci à tous pour votre attention!! Lécythe attique à fond blanc représentant peut-être le combat d'Ajax et d'Ulysse pour les armes d'Achille, Érétrie, v. 500 av. J.-C., musée du Louvre. Source Wikipedia Ajax et les langages serveurs

More Related