AJAX et les langages serveurs

Transcript 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.
A accueilli de superbes joueurs tels que:
Johan Cruyff & Edgar Davids
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
Célèbre marque
de produits
ménager.
Capable de laver
plus blanc que
blanc?
2
Table des matières



Asynchronous Java And Xml
Présentation
Technologies mises en jeu





Langages serveurs



Formatage des données
Transfert de responsabilité
Framework



Présentation des données
Interaction
Transfert
Parcours et mise en forme des données
Création automatique de requêtes
Autocomplétion
Développement
Maxime Diawara - 2007
Ajax et les langages serveurs
3
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
4
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
5





Ajax
Technologies
mises en jeu
Langages
serveurs
Framework
Aller plus loin
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
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
8
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
9
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
10
Mode sans ajax





Ajax
Technologies
mises en jeu
Langages
serveurs
Framework
Aller plus loin
(2) Le navigateur
interroge le serveur
(4) Le serveur renvoie au navigateur
une page avec de nouvelles valeurs
(1) L’utilisateur
fait une action
Maxime Diawara - 2007
(3) Le serveur consulte
une base de données
Ajax et les langages serveurs
11
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
12
Le découpage de la page





Ajax
Technologies
mises en jeu
Langages
serveurs
Framework
Aller plus loin
<div id="1">
ma tache 1
Nombre d’entités :
2
Développeurs : User 1
User 2
User 3
<div id="2">
<div id="3">
Maxime Diawara - 2007
Ajax et les langages serveurs
13
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
14
Le transfert des données





Ajax
Technologies
mises en jeu
Langages
serveurs
Framework
Aller plus loin
(2) L’action est
captée par le code
JavaScript de la page
(1) L’utilisateur
fait une action
Maxime Diawara - 2007
(5) Les modifications sont
appliquées à la page
Ajax et les langages serveurs
(3) Un Objet JavaScript
émet une requête vers
un serveur.
- Web
- Base de données
- Serveur distant
(4) Le serveur répond
à la requête avec les
nouvelles valeurs
15
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
16
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
17
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
18
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
19
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
20
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
21
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
22
Démo simple d’AJAX





Ajax
Technologies
mises en jeu
Langages
serveurs
Framework
Aller plus loin
(2) L’action est
captée par le code
JavaScript de la page
(1) L’utilisateur
fait une action
Maxime Diawara - 2007
(3) récupération du
contenu de fichiers:
- JSON
- XML
(4) Les modifications sont
appliquées à la page
Ajax et les langages serveurs
23
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-wwwform-urlencoded');
var data = ‘id =‘+id;
request_ajax.send(data);
}
Maxime Diawara - 2007
Ajax et les langages serveurs
24
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
25
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
26
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
27
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
28
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
29
Démo JSP





Ajax
Technologies
mises en jeu
Langages
serveurs
Framework
Aller plus loin
(2) L’action est
captée par le code
JavaScript de la page
(1) L’utilisateur
fait une action
Maxime Diawara - 2007
(5) Les modifications sont
appliquées à la page
(3) JavaScript
consulte la JSP
de données
Ajax et les langages serveurs
(4) La JSP
accède aux
données du
serveur
30
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
31
Démo Proxy ASP





Ajax
Technologies
mises en jeu
Langages
serveurs
Framework
Aller plus loin
(2) L’action est
captée par le code
JavaScript de la page
(1) L’utilisateur
fait une action
Maxime Diawara - 2007
(5) Les modifications sont
appliquées à la page
(3) JavaScript
consulte le
Proxy ASP du
serveur web
Ajax et les langages serveurs
(4) Le script
ASP accède
aux données
du serveur
distant
32
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
33
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
34
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
35
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
36
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
37

AJAX et les langages serveurs

Transcript AJAX et les langages serveurs

Directory