Upload
trystan-lelievre
View
106
Download
0
Embed Size (px)
Citation preview
AJAX et les langages serveurs
Exposé de système et réseauxInformatique et Réseaux - 3ème année – Mars
2007
Maxime Diawara
Maxime Diawara - 2007 Ajax et les langages serveurs 2
J’ai vraiment dis AJAX?
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.
Club de football néerlandais basé à Amsterdam.29 fois Champion des Pays-Bas.4 fois vainqueur de laLigue 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?
Maxime Diawara - 2007 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
Maxime Diawara - 2007 Ajax et les langages serveurs 4
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’échanged’informations entre les navigateurs Web et les serveurs. »
Maxime Diawara - 2007 Ajax et les langages serveurs 5
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 6
Ajax Technologies mises en jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 7
Ajax Technologies mises en jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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 Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 9
Présentation des données - 1
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>
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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). table {
background-image: url("url/img.png");border: 1px solid black;
}
tr{background-color: #fff000;
}
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 11
Mode sans ajax
(1) L’utilisateur fait une action
(2) Le navigateur interroge le serveur
(3) Le serveur consulte une base de données
(4) Le serveur renvoie au navigateur une page avec de nouvelles valeurs
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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<div id="1">contenu</div>
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 13
Le découpage de la page
User 1User 2User 3
<div id="1"> Nombre d’entités : Développeurs :ma tache 1 2
<div id="2">
<div id="3">
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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>.
function upDate(id, valeur){ document.getElementById(id).innerHTML = valeur;}
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 15
Le transfert des données
(1) L’utilisateur fait une action
(3) Un Objet J avaScript émet une requête vers un serveur.- Web - Base de données - Serveur distant
(5) Les modifications sont appliquées à la page
(2) L’action est captée par le code J avaScript de la page
(4) Le serveur répond à la requête avec les nouvelles valeurs
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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 Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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
var requete_ajax = getHttpRequest();
requete_ajax.open('GET', ‘url', false);
requete_ajax.send(null);
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 18
Création de l’Objet XMLHttpRequest
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;
}
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 19
Création de l’Objet Msxml2.XMLHTTP
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;
}
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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 Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 21
Traitement des données
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;
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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
textData = eval('('+requete_ajax.responseText+')');$(‘id').innerHTML = textData .Info;
{Info:'chargement en cours… ',Site:'myajax.fr'
}
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 23
Démo simple d’AJAX
(1) L’utilisateur fait une action
(4) Les modifications sont appliquées à la page
(2) L’action est captée par le code J avaScript de la page
(3) récupération du contenu de fichiers:- J SON- XML
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 24
Envoi d’une requête Post
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);
}
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 25
Envoi d’une requête Post
Requête & information de l’utilisateur
function onResult(request_ajax) {if (request_ajax.readyState == 4) {
if (request_ajax.status == 200) {$(‘infoUser').innerHTML = '';
}}
}
Ajax Technologi
es mises en
jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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
Maxime Diawara - 2007 Ajax et les langages serveurs 27
Emploi des JSP pour écrire en JSON
Ajax Technologies mises en jeu Langages
serveurs Framework Aller plus
loin
<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%>",<%}%>}]
}
Maxime Diawara - 2007 Ajax et les langages serveurs 28
Analyse des données récupérées
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;
Ajax Technologies mises en jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 29
Code généré Ajax & Jsp
Création d’une liste déroulante
<select size=1 onChange=" "><option value="VAL">INFO<option/>…
<select/>
Ajax Technologies mises en jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 Ajax et les langages serveurs 30
Démo JSP
(1) L’utilisateur fait une action
(3) J avaScript consulte la J SP de données(5) Les modifications sont
appliquées à la page
(2) L’action est captée par le code J avaScript de la page
(4) La J SP accède aux données du serveur
Ajax Technologies mises en jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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
Maxime Diawara - 2007 Ajax et les langages serveurs 32
Démo Proxy ASP
Ajax Technologies mises en jeu Langages
serveurs Framework Aller plus
loin
(1) L’utilisateur fait une action
(3) J avaScript consulte le Proxy ASP du serveur web(5) Les modifications sont
appliquées à la page
(2) L’action est captée par le code J avaScript de la page (4) Le script
ASP accède aux données du serveur distant
Maxime Diawara - 2007 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
Maxime Diawara - 2007 Ajax et les langages serveurs 34
Le Framework Prototype
Création automatique de requêtes
new Ajax.Request(‘URL',{parameters: ‘id='+id,method: 'get',onSuccess: showResponse
});
function showResponse(req){data = req.responseXML;
…}
Ajax Technologies mises en jeu Langages
serveurs Framework Aller plus
loin
Maxime Diawara - 2007 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??
Maxime Diawara - 2007 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 studiohttp://www.eclipseplugincentral.com/displayarticle253.html Java Server Faceshttp://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
Maxime Diawara - 2007 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