AJAX et les langages serveurs Exposé de système et réseaux Informatique et Réseaux - 3ème année – Mars 2007 Maxime Diawara

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

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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

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

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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

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 - 2007 Ajax et les langages serveurs

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

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 - 2007 Ajax et les langages serveurs

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

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 - 2007 Ajax et les langages serveurs

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 http://myajax.fr?param=value false : mode Asynchrone var requete_ajax = getHttpRequest(); requete_ajax.open('GET', ‘url', false); requete_ajax.send(null); Maxime Diawara - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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

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 - 2007 Ajax et les langages serveurs

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

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs

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 http://www.eclipse.org/rap/ Plugin Echo studio http://www.eclipseplugincentral.com/displayarticle253.html Java Server Faces http://java.sun.com/javaee/javaserverfaces/ Bibliographie & sources: - Ajax le guide complet – Micro Application - http://fr.wikipedia.org/ - UMLV – Projet GL IR3 - Hawaii Team Maxime Diawara - 2007 Ajax et les langages serveurs

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 - 2007 Ajax et les langages serveurs