AJAX et les langages serveurs

Présentation au sujet: "AJAX et les langages serveurs"— Transcription de la présentation:

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 Ajax et les langages serveurs
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 av. J.-C. Maxime Diawara Ajax et les langages serveurs

3 Ajax et les langages serveurs
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 Maxime Diawara Ajax et les langages serveurs

4 Ajax et les langages serveurs
Le WEB 2 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. » Maxime Diawara Ajax et les langages serveurs

5 Ajax et les langages serveurs
Qu’est-ce que c’est? 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 » Maxime Diawara Ajax et les langages serveurs

6 Ajax et les langages serveurs
Technologies mises en jeu Langages serveurs Framework Aller plus loin Maxime Diawara Ajax et les langages serveurs

7 Ajax et les langages serveurs
Technologies mises en jeu Langages serveurs Framework Aller plus loin Maxime Diawara Ajax et les langages serveurs

8 Ajax et les langages serveurs
Comment ça marche? Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin 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 Maxime Diawara Ajax et les langages serveurs

9 Présentation des données - 1
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin XHTML HyperText Markup Language basé 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. <table background= "url/img.png" border= "1"> <tr bgcolor= "#fff000"> <td width="50px"></td> </tr> </table> Maxime Diawara Ajax et les langages serveurs

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

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

12 Ajax et les langages serveurs
Le découpage de la page Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin <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 <div id="1">contenu</div> Maxime Diawara Ajax et les langages serveurs

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

14 L’interaction avec le serveur
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin 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>. function upDate(id, valeur){ document.getElementById(id).innerHTML = valeur; } Maxime Diawara Ajax et les langages serveurs

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

16 L’Objet XMLHttpRequest
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin 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 Maxime Diawara Ajax et les langages serveurs

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

18 Création de l’Objet XMLHttpRequest
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin Mozilla Firefox 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; Maxime Diawara Ajax et les langages serveurs

19 Création de l’Objet Msxml2.XMLHTTP
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin Internet Explorer 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; Maxime Diawara Ajax et les langages serveurs

20 Traitement des données
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin 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 Maxime Diawara Ajax et les langages serveurs

21 Traitement des données
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin Les données XML 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; Maxime Diawara Ajax et les langages serveurs

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

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

24 Envoi d’une requête Post
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin POST 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); } Maxime Diawara Ajax et les langages serveurs

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

26 Ajax et les langages serveurs
Ajax & JSP Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin 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 Maxime Diawara 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[{ info:"<%=entity.info%>", }] } Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin Maxime Diawara Ajax et les langages serveurs

28 Analyse des données récupérées
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin Création du code HTML mis à jour 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; Maxime Diawara Ajax et les langages serveurs

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

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

31 Ajax et les langages serveurs
Ajax & ASP Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin 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 Maxime Diawara Ajax et les langages serveurs

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

33 Ajax et les langages serveurs
Ajax clefs en main Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin 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 Maxime Diawara Ajax et les langages serveurs

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

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

36 Les outils pour aller plus loin…
Ajax Technologies mises en jeu Langages serveurs Framework Aller plus loin Quelques IDE et technologies AJAX Eclipse avec Rich Ajax Project – release n°1 06/2007 Plugin Echo studio Java Server Faces Bibliographie & sources: - Ajax le guide complet – Micro Application - - UMLV – Projet GL IR3 - Hawaii Team Maxime Diawara 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 Maxime Diawara Ajax et les langages serveurs