370 likes | 497 Views
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.
E N D
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. 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
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
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
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
Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs
Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs
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
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
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
Mode sans ajax • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs
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
Le découpage de la page • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs
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
Le transfert des données • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs
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
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
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
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
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
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
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
Démo simple d’AJAX • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs
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
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
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
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
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
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
Démo JSP • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs
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
Démo Proxy ASP • Ajax • Technologies mises en jeu • Langages serveurs • Framework • Aller plus loin Ajax et les langages serveurs
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
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
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
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
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