Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication...
-
Upload
trinhhuong -
Category
Documents
-
view
214 -
download
0
Transcript of Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication...
Développement WebCommunication Client-Serveur
LI328Sylvain Lamprier
UPMC
1 / 57
Communication Client-ServeurNavigateur Serveur Base de données
MySQLBase de données
NoSQLMoteur d'indexation
Map - Reduce(Tomcat)
URL
SelectCommentaires
Resultats
Affichage
Page Principale
Affichage
Commentaires Objet JSONSelect Stats
ResultatsObjet JSONAffichage
Statistiques
ClicLien Login
AJAXJSON
HTMLCSS Javascript
Affichage
Page Login
Login + MDP Infos valides ?Select
Utilisateur
Resultats Affichage
Page Principale Select Stats Utilisateur
ResultatsObjet JSONAffichage
Statistiques
NouveauCommentaire
NouveauCommentaire Insert
Commentaire
Insertion Ok Objet JSONAffichage
Nouveau Commentaire
Recherchepar Mots-Clé
Commentaires Pertinents ?
Select Commentaires Pertinents
ResultatsObjet JSONAffichage
Resultats Recherche
Indexation / Calculs StatsEnregistrement
Index
Get Nouvelles infos
Page d'accueil ?
HTML
Page Login ?
HTML
HTML
2 / 57
Chargement de page Web
<html>
Le symbole de Linux est
<img src=« photo.png »>
…
</html> get photo.png
host ...
Le symbole de
Linux est
écran du navigateur
disque durdu serveur
get linux.htmlhost ...
internet
<html>
….Le symbole de
Linux est
<img src=«photo.png»>
…
</html>
linux.html
photo.png
Qu'est-ce que
Linux ?
<html>
…. Le symbole de Linux est
<img src=« photo.png »
…
</html>
200 entêtes
200 entêtes
3 / 57
Communication Client-Serveur
Protocole HTTPPermet de demander et télécharger des pages Webstockées sur un serveur distant
Contenu HTMLFeuilles de style CSSFonctions JavascriptContenu multimedia
Navigateur clientInterprète le contenu HTML/CSS et construit l’arbre DOMdu document correspondantTraite les scripts Web appelés en réaction à diversévènementsCharge et affiche les contenus mulimedia (images, videos,etc...)
4 / 57
Communication Client-Serveur
⇒ Comment faire transiter des informations entre deux pagesWeb?
Contenu de variables Javascript, Données de formulaire,etc...
⇒ Comment faire pour transmettre et récupérer desinformations stockées sur le serveur?
Enregistrement d’informations saisies par l’utilisateur,Récupération de données dans base de données, etc...
⇒ Comment demander au serveur l’exécution de traitements"lourds"?
Indexation des commentaires postés, Calculs statistiques,etc...
5 / 57
Comment faire transiter des informations entre deuxpages HTML?
Exemple de Scénario1 L’utilisateur saisit différentes préférences d’affichage sur
une page "preferences.hml"2 Il clique sur valider qui le redirige (par window.location.href)
vers la page principale du site "main.html"3 La page principale se charge et l’on souhaite que les
préférences saisies soient prises en compte pourl’affichage de son contenu
Problème : HTML n’est pas prévu pour interpréterdirectement des informations qu’on lui envoie⇒ Deux pages HTML sont totalement indépendantes⇒ Le navigateur se contente de charger la nouvelle page
demandée (les informations de la page de départ ne sontplus accessibles)
6 / 57
Comment faire transiter des informations entre deuxpages HTML?
Javascript nous permet d’entrevoir 2 premières solutionsUtiliser l’URL
1 Passer des informations dans l’URL après "?"(exemple : main.html?nom=joe&couleur_fond=blue)
2 Récupérer cette chaîne dans la nouvelle page avecJavascript par window.location.search(retourne "?nom=joe&couleur_fond=blue")
3 Parser la chaîne obtenue pour reconstruire les variables
⇒ Peu sécurisé (à éviter absolument lors de transfert d’infosde connexion)
⇒ Difficile de transmettre autre chose que des infos trèssimples
⇒ URL à rallonge
7 / 57
Comment faire transiter des informations entre deuxpages HTML?
Javascript nous permet d’entrevoir 2 premières solutionsUtiliser des Cookies
Petits fichiers textes stockés sur le disque du client,permettant de stocker des paires clés/valeurLisibles uniquement à partir du site qui les a créésCréation et lecture aussi bien à partir du client que duserveur (mais cookies indépendants)
1 Avant de quitter "preferences.html" : Enregistrement desinformations saisies sur le poste client
2 A l’arrivée sur la page "main.html" : Récupération desinformations stockées dans les cookies définis pour le site
⇒ Certains utilisateurs interdisent la création de cookies⇒ Certains navigateurs ne gèrent pas bien les cookies⇒ Limitation en nombre :
Leur nombre total est limité à 300Il ne peut exister au maximum que 20 cookies par domaine
⇒ Limitation en taille : max/cookie=4ko8 / 57
Comment faire transiter des informations entre deuxpages HTML?
Javascript nous permet d’entrevoir 2 premières solutions
... Mais aucune des deux n’est vraiment satisfaisante
⇒ Ce doit être au serveur d’insérer les informationsnécessaires dans la nouvelle page
Plusieurs possibilités mais plutôt que de simplementrenvoyer une page HTML, le serveur doit effectuer untraitement
⇒ Revient au problème de transfert/récupération d’infos sur leserveur
⇒ Nécessite de disposer d’un serveur Web capable demanipuler des données et de les insérer dans des pagesHTML cibles
Interpréteur de scripts serveur comme PHP ou ASPMoteur de servlets JAVA
9 / 57
Communication Client-Serveur
1 Le protocole HTTP
2 Communication par génération
3 Communication par insertion
4 Problème de persistance des données
5 Communication asynchrone
10 / 57
Communication Client-Serveur
Le protocole HTTP
11 / 57
Les protocoles
Protocole = Langage de communication⇒ Ensemble de règles et de procédures à respecter pour
émettre et recevoir des données sur un réseau⇒ Différents protocoles selon ce que attend de la
communication :FTP : Échange de fichiersHTTP : Transfert de pages WebSMTP : Transfert de courrier electroniqueICMP : Gestion des erreurs de transmission. . .
Deux grandes catégories de protocoles :
Les protocoles orientés connexion :Contrôle de transmission des données
Les protocoles non orientés connexion :La machine émettrice envoie des données sans prévenir lamachine réceptrice, et la machine réceptrice reçoit lesdonnées sans envoyer d’accusé de réception à la première
12 / 57
Les protocoles
Les protocoles respectent un modèle en couches(ensemble de couches empilées) :
Chaque couche dialogue avec la couche juste au-dessus etcelle juste au-dessous :⇒ Elle fournit des services à la couche au-dessus⇒ Elle utilise les services de la couche en-dessous
Chaque couche encapsule les données venant de lacouche du dessus en y ajoutant ses propres informations
Analogie : Communication entre deux personnes neparlant pas la même langue
13 / 57
Les protocoles normalisés de l’ISO(International Standards Organisation)
Modèle OSI(Open Systems Interconnection)
14 / 57
Le Protocole HTTP
HyperText Transfer Protocol (HTTP)Protocole développé pour la communication client-serveurdans le cadre du WebProtocole de la couche application du modèle OSIS’appuie sur le protocole TCP pour le transport desdonnéesUtilise le port 80 (443 pour HTTPS)
Manipulation de 2 types d’objets :Un objet requête : HttpRequestUn objet reponse : HttpResponse
15 / 57
L’objet Request
Requête HTTP = texte envoyé au serveur par le navigateur :Une ligne introductive contenant :
La méthode utiliséeL’url demandéeLa version du protocole utilisé par le client (généralementHTTP/1.0)
Une partie d’en-tête contenant un ensemble de lignes facultativespermettant de donner des informations supplémentaires sur larequête et/ou le clientUne partie corps de la requête contenant les données àtransmettre (dans le cas d’une transmission d’informations par laméthode POST)
Objet Request
METHODE URL VERSIONEN−TETE : Valeur...EN−TETE : ValeurLigne v ideCORPS DE LA REQUETE
16 / 57
L’objet RequestMéthode = Commande informant le serveur sur l’action àeffectuer concernant l’URL spécifiée
GET : demande le téléchargement d’une ressource (urlspécifiée)HEAD : demande des informations sur une ressourcePOST : permet d’envoyer des données à la ressourcePUT : permet de remplacer ou d’ajouter une ressource surle serveurDELETE : permet de supprimer une ressource du serveur
Pour l’envoi de données à partir d’un formulaire, on peuten fait utiliser GET ou POST
GET : Les informations sont ajoutées en fin de l’URLdemandée (après "?")POST : Les informations sont insérées dans le corps del’objet Request (plus sûr)
Envoi de données à partir d’un formulaire
<form ac t i on ="main . php " method=" get ">
<form ac t i on =" h t t p : / / l o c a l h o s t :8080/ LI260 / ConnexionServlet " method=" post ">
17 / 57
L’objet Request
En-têtes de requêteAccept : Type de contenu accepté par le browser (text/html,text/plain, text/xml, application/json, audio/mpeg, ...).Authorization : Données d’authentification du client auprèsdu serveurContent-Type : Type de contenu du corps de la requête(application/x-www-form-urlencoded oumultipart/form-data)Cookie : Cookies préalablement enregistrés par le serveuravec une entête de réponse Set-CookieReferer : URL de la page à partir de laquelle la requête aété effectuéeUser-Agent : Logiciel formulant la requête...
18 / 57
L’objet Response
Réponse HTTP = texte envoyé du serveur au navigateur :Une ligne de statut contenant :
La version du protocole utiliséLe code de statutLa signification du code
Une partie d’en-tête contenant un ensemble de lignes facultativespermettant de donner des informations supplémentaires sur laréponse et/ou le serveurUne partie corps de la réponse contenant les donnéesdemandées
Objet Response
VERSION−HTTP CODE EXPLICATIONEN−TETE : Valeur...EN−TETE : ValeurLigne v ideCORPS DE LA REPONSE
19 / 57
L’objet Response
En-têtes de réponseContent-Type : Type de contenu du corps de la réponse(text/html, text/plain, text/xml, application/json,audio/mpeg, ...).Last-Modified : Date de dernière modification de laressource retournéeLocation : En cas de redirection, contient l’adresse àcharger par le navigateurServer : Caractéristiques du serveur ayant envoyé laréponseSet-Cookie : Cookies à enregistrer chez le clientUser-Agent : Logiciel formulant la requête...
20 / 57
Communication Client-Serveur
Génération de contenu
21 / 57
Communication par génération de contenu
22 / 57
Communication par génération de contenu
23 / 57
Communication par génération de contenu
HTML pas prévu pour accepter des informations externes⇒ Une des solutions est alors de demander au serveur de
générer le contenu d’une nouvelle contenant le résultat dutraitement d’informations transmises.
Exemple de scénario1 L’utilisateur saisit ses identifiants mots de passe dans un
formulaire puis valide2 Les informations saisies sont transmises (de préférence en
POST) au serveur3 Le serveur vérifie la validité des identifiants envoyés (par le
biais d’une base de données)4 Selon la validité des informations fournies, le serveur
génère une nouvelle page HTML (content-type=text/html).5 Si les identifiants sont valides, le serveur inclut des
informations sur l’utilisateur connecté dans la nouvelle page6 La nouvelle page est retournée au client et chargée par le
navigateur
24 / 57
Communication par génération de contenu
Génération de page HTML
###################Page de Connexion
###################
<form ac t i on ="www. l i p 6 . serveur . f r / Log inServ le t " method="POST">< inpu t type =" t e x t " name=" l o g i n " / >< inpu t type =" password " name=" pass " / >< inpu t type =" submit " value =" Envoyer " / ></ form >
###################Log inServ le t
###################
Récupérat ion des in fo rma t i ons dans l ’ o b j e t HTTP RequestDéc la ra t ion du type du contenu de l ’ o b j e t HTTP Response : t e x t / htmlV é r i f i c a t i o n des l o g i n / mots de passe dans l a base de donnéesSi ( v a l i d e ) a l o r s
Générat ion d ’ une page HTML contenant les i n f o s de connexion( par méthodes de type p r i n t ( " <HTML> <HEAD> . . . </BODY> </HTML> " ) )
SinonGénérat ion d ’ une page HTML contenant l e message d ’ e r reu r
F inS i
25 / 57
Communication par génération de contenu
Serveur de génération de pages HTMLOn passe de pages en pages générées dynamiquementPermet de se déplacer sur des pages contenant lesinformations dont on a besoin
Mais...Il peut s’avérer difficile / fastidieux d’écrire l’ensemble despages avec des print(), surtout si on a de nombreux cas àgérerLe contenu n’est pas séparé des traitements⇒ Travail à plusieurs difficile⇒ Code rapidement très complexe⇒ Évolutions / Modifications coûteuses
26 / 57
Communication Client-Serveur
Insertion de contenu
27 / 57
Communication par insertion de contenu
Plutôt que de générer des pages HTML entières⇒ L’idée est de ne générer qu’une sous-partie de la page à
retourner, le reste restant fixe⇒ Les pages Web contiennent des marqueurs informant des
zones à générer dynamiquement
Deux possibilités
1 Intégrer un appel à un programme externe de génération(servlet dans notre cas) dans la page
2 Directement écrire du code serveur dans les pages Web
28 / 57
Communication par insertion de contenu
Intégration d’un appel à un programme externeSSI (pour Server Side Includes) permet de faire appel àune servlet externe pour remplir une partie de la page
Fichier SSI : bonjour.shtml
<HTML><HEAD><TITLE>SSI </ TITLE></HEAD><BODY><SERVLET CODE=Bonjour CODEBASE= h t t p : / / l o c a l h o s t :8080/ ><PARAM NAME="nom" VALUE=" J u l i e n ">Si vous l i s e z ce tex te , c ’ es t que vo t re serveur Web ne supporte pasles Serv le t s u t i l i s é e s v ia SSI .</SERVLET></BODY></HTML>
29 / 57
Communication par insertion de contenu
SSIUtile pour afficher du contenu stocké sur le serveur (ou desrésultats de traitements)Permet de ne pas à avoir à écrire l’ensemble de la page àpartir de la servlet
Mais...RigideLe serveur doit supporter les directives SSI
⇒ Utile pour petites insertions dynamiques (commeJavaScript mais côté serveur)
30 / 57
Communication par insertion de contenu
Écrire du code serveur dans les pages WebPossible avec de nombreux langages (PHP, ASP, CGI, ...)Pour Java : JSP
JSP (pour Java Server Pages)Pages HTML classiques (extension .jsp) mais contenantdes balises <%...%> permettant d’inclure du code JAVA
Le code HTML et les parties de code JAVA de la page jspsont inclus dans un servlet de génération de contenu HTMLau moment du premier appel à la page
31 / 57
Communication par insertion de contenu
32 / 57
Insertion de contenu : les JSP
Deux objets principaux :request : l’objet représentant la requête venant du client.out : l’objet représentant le flux d’impression en sortie
Différentes directives (encadrées par <%@...%>)Pour l’import de classes :<%@import = ”monpackage.∗”%>Pour l’extension de servlets :<%@extends = ”maClassePersoHttp”%>
Expressions (encadrées par : <%= ...%>)Simples évaluations directement écrites sur la sortiePermettent d’éviter l’écriture println()Exemple : <%= request .getParameter(”parametre”)%>
Déclarations (encadrées par : <%!...%>)Permet de déclarer des variables globales (qui persistenttant que l’on n’arrête pas le serveur)Exemple : <%!int nbVisites = 0;%>
33 / 57
Communication par insertion de contenu : JSP
JSP
<HTML><HEAD><TITLE> JSP</ TITLE></HEAD><BODY><%
Code Java%></BODY></HTML>
Exemple de JSP
<HTML><HEAD><TITLE> JSP</ TITLE></HEAD><BODY><% i f ( request . getParameter ( "nom" ) == n u l l ) {
out . p r i n t l n ( " Bonjour monde ! " ) ;} e lse {
out . p r i n t l n ( " Bonjour " + request . getParameter ( "nom" ) + " ! " ) ;}
%></BODY></HTML>
34 / 57
Communication par insertion de contenu : JSP
Autre exemple JSP
<%−− Impor ta t i on d ’ un paquetage ( package ) −−%><%@page impor t =" java . u t i l .*"% ><html ><head>< t i t l e >Page JSP</ t i t l e > </head><body>
<%−− Déc la ra t ion d ’ une v a r i a b l e g loba le à l a c lasse −−%><%! i n t nombreVis i tes = 0; %>
<%−− D é f i n i t i o n de code Java −−%><% / / I l es t poss ib le d ’ é c r i r e du code Java i c i
Date date = new Date ( ) ;/ / On peut incrémenter une v a r i a b l e g loba le pour compter l e nombre/ / d ’ a f f i chage , par exemple .nombreVis i tes ++;
%><h1>Exemple de page JSP</h1><%−− Impression de v a r i a b l e s −−%><p>Au moment de l ’ exécut ion de ce s c r i p t , nous sommes l e <%= date %>.</p><p>Cette page a été a f f i c h é e <%= nombreVis i tes %> f o i s ! < / p></body></ html >
35 / 57
Communication par insertion de contenu
JSPUtile pour afficher du contenu stocké sur le serveur (ou desrésultats de traitements)Utile pour envoyer du contenu au serveurPermet de générer facilement des pages Web dynamiques
Certainement l’une des meilleures solutions (AJAXexcepté) mais...
Lenteur de réponse lors du premier appel (traduction etcompilation nécessaires)Code relativement complexeSéparation peu évidente entre contenu et traitementsComme les SSI, rechargement global d’une page mêmepour des modifications minimes (communicationsynchrone)
36 / 57
Communication Client - Serveur
Problème de persistance des donnéesUn certain nombre de données sont chargées dans la pagedu navigateur
Identifiant de connexionInformations en provenance du serveurInformations en provenance de l’utilisateurStructures de données construites par le client
⇒ Comment faire en sorte que ces informations ne soient pasperdues après communication avec le serveur?
Que ce soit dans le cadre d’une communication pargénération ou par insertion, on change de page et donc lesinfos de la page de départ sont perdues...
37 / 57
Communication Client - Serveur : Persistance desdonnées
Différentes possibilitésUtilisation de cookies
+ Persistance possible même après redémarrage du client− Problème pour les informations volumineuses− Certains utilisateurs refusent les cookies− Détournement de cookies
Utilisation de l’adresse IP+ Permet de savoir d’où vient la requête− Uniquement pour le suivi d’utilisateur− Problème de partage d’IP / d’ordinateur− Problème avec utilisateur à IP non fixes
Renvoi des informations à chaque communicationUtilisation de l’URL pour GET et de champs de formulairecachés pour POST
+ Bonne maitrise des informations échangées− Gestion difficile (le renvoi systématique peut s’avérer
complexe / fastidieux)− Forte consommation de bande passante
38 / 57
Communication Client - Serveur : Persistance desdonnées
Différentes possibilitésUtilisation de window.name
+ Propriété modifiable et pas rechargée lors du changementde page
+ Possibilité de stocker des objets complexes dans cettepropriété
− Différents onglets / fenêtres ne partagent pas cette propriété− Sécurité : Informations stockées disponibles à d’autres sites
ouverts dans le même onglet
Authentification HTTPLe serveur demande un certificat pour accorder l’accès àune page web
+ Permet un bon suivi de l’utilisateur− Problème de partage de compte− La demande de certificat peut effrayer l’utilisateur− Uniquement pour le suivi d’utilisateur
39 / 57
Communication Client - Serveur : Persistance desdonnées
Différentes possibilitésUtilisateur d’objets locaux partagés
Cookies flash gérés par Adobe Flash Player+ Flash Player est un plugin très répandu+ La taille limite pour un objet local partagé est de 100 kB+ Le contrôle des cookies flash est distinct des contrôles des
cookies classiques− Flash non supporté sur de nombreuses tablettes /
smartphones− Flash plus ou moins voué à disparaître
Sauvegarde dans le navigateurCertains navigateurs permettent de sauvegarder desdonnées dans des objets persistants
+ Prévu dans HTML 5− Varie encore fortement selon les navigateurs
40 / 57
Communication Client - Serveur : Persistance desdonnées
Différentes possibilités
Utilisation de sessions
Session HTTP : Table de hachage permettant d’enregistrertoutes sortes d’informations côté serveur
L’objet Session correspondant à une navigation en cours estrepéré par un identifiant contenu dans l’objet Request
+ Permet de sauvegarder des objets complexes construits parle serveur pour une navigation donnée
− Nécessité de stocker l’id de session quelque part (par défautdans un cookie créé automatiquement par le serveur)
− Ne permet pas de sauvegarder les données du client (saufsi on les envoie au serveur)
41 / 57
Communication Client - Serveur : Persistance desdonnées
Différentes possibilités
Ne pas changer de page
Si l’on ne change jamais de page, on n’a pas de problèmede transmission de données entre pages
Avec des techniques de communication asynchrone, il estpossible de ne recharger qu’une partie de la page
+ Toutes les informations et structures chargées par le clientrestent valides, tout au long de la navigation
− Concerne uniquement les structures côté client (maispossibilité d’utiliser des sessions)
42 / 57
Communication Client-Serveur
Communication asynchrone
43 / 57
Communication Client - Serveur
Communication classique1 Envoi de données au serveur2 Le serveur traite les données, génère une réponse et la
retourne au client3 Le client charge la réponse reçue
⇒ Navigation peu fluide⇒ Persistance des données difficile
44 / 57
Communication Client - Serveur
Communication asynchrone1 Un objet intermédiaire permettant la communication est
créé par le client.2 Un gestionnaire de réponse lui est associé.3 Un script de la page client envoie les données à l’objet
intermédiaire4 L’objet intermédiaire se charge de former la requête et de la
transmettre au serveur5 Le serveur retourne une réponse au format attendu par le
navigateur (xml,text,json,html...)6 Le gestionnaire de réponse traite les informations reçues et
réalise les modifications nécessaires dans l’arbre DOM.
45 / 57
Communication Client - Serveur
Communication asynchrone
⇒ Pas besoin d’attendre le traitement de la requête pour continuer lanavigation
⇒ Permet de conserver le contexte de la requête (donnéesprécédemment chargées par le navigateur)
46 / 57
Communication asynchrone
Première solution : utilisation de <iframe></iframe>La balise iframe permet de charger le contenu d’un fichier(renseigné par src)
1 Ajout d’un attribut target au formulaire pointant vers uniframe invisible
2 Au moment de la soumission du formulaire, la ressourcepointée par l’attribut action est appelée normalement
3 Mais le résultat est chargé dans l’iframe pointée par targetplutôt que dans la fenêtre principale
⇒ Pas de rechargement global / Pas de perte de contexte
Si l’on affecte une fonction à l’évènement onload del’iframe, on peut appliquer un traitement selon les élémentsretournés par la ressource
⇒ Modification de certaines données de la page principale
47 / 57
Communication Asynchrone
Exemple d’asynchrone avec <iframe> : Envoi de fichier
< i f rame i d =" uploadTrg " name=" uploadTrg " he igh t ="0"width ="0" frameborder ="0" s c r o l l i n g =" yes " > </ i f rame >
<form i d ="myForm" ac t i on =" AddF i leServ le t " method=" post "enctype =" m u l t i p a r t / form−data " t a r g e t =" uploadTrg ">
F i l e : < i npu t type =" f i l e " name=" f i l e ">
< inpu t type =" submit " value =" Submit " i d =" submitBtn " / >
</ form >
< s c r i p t type =" t e x t / j a v a s c r i p t ">$ ( " i f rame " ) . load ( f u n c t i o n ( ) {
a l e r t ( " Upload ok " ) ;} ) ;</ s c r i p t >
Limitations de l’asynchrone par iframe :Réponses de requêtes simultanées peuvent se chevaucherPas de contrôle évident du status de la communication
48 / 57
Communication Client - Serveur
AJAX (Asynchronous Javascript and XML)Objet central : l’objet Javascript XMLHttpRequest définidans tous les navigateurs récentsInitialement prévu pour communiquer au format XML maisce n’est pas une obligation.
49 / 57
Communication asynchrone
50 / 57
Communication Asynchrone : AJAX
3 grandes étapesCréation de l’objet XMLHttpRequestGénération de la requêteGestion de la réponse
Création de l’objet XMLHttpRequest
f u n c t i o n getXMLObject ( ) / / XML OBJECT{
var xmlHttp = f a l s e ;t r y {
xmlHttp = new Act iveXObject ( " Msxml2 .XMLHTTP " ) ; / / Anciens nav iga teurs M ic roso f t}catch ( e ) {
t r y {xmlHttp = new Act iveXObject ( " M ic roso f t .XMLHTTP " ) ; / / Pour IE 6.0 e t +
}catch ( e2 ) {
xmlHttp = f a l s e ;}
}i f ( ! xmlHttp && typeo f XMLHttpRequest != ’ undefined ’ ) {
xmlHttp = new XMLHttpRequest ( ) ; / / Pour Moz i l la , Opera , e tc . . .}r e t u r n xmlHttp ;
}env . xmlh t tp = new getXMLObject ( ) ; / / Enregis t rement de l ’ o b j e t
51 / 57
Communication Asynchrone : AJAX
3 grandes étapesCréation de l’objet XMLHttpRequestGénération de la requêteGestion de la réponse
Génération de la requête
i f ( env . xmlh t tp ) {env . xmlh t tp . open ( "POST" , " Log inServ le t ? " , t r ue ) ;env . xmlh t tp . onreadystatechange = handleConnect ;env . xmlh t tp . setRequestHeader ( ’ Content−Type ’ , ’ a p p l i c a t i o n / x−www−form−urlencoded ’ ) ;env . xmlh t tp . send ( " l o g i n ="+ logname+"&password="+pass ) ;
}e lse { a l e r t ( " AJAX Probleme : xmlh t tp i n t r o u v a b l e " ) ; }
52 / 57
Communication Asynchrone : AJAX
3 grandes étapesCréation de l’objet XMLHttpRequestGénération de la requêteGestion de la réponse
Gestion de la réponse
f u n c t i o n handleConnect ( ) {i f ( xmlh t tp . readyState == 4) {
i f ( xmlh t tp . s ta tus == 200) {var rep=xmlh t tp . responseXML . documentElement ;a l e r t ( rep . getElementsByTagName ( ’ s ta tus ’ ) [ 0 ] . f i r s t C h i l d . data ) ;
}e lse {
a l e r t ( xmlh t tp . s ta tus +" Er ro r dur ing AJAX c a l l . Please t r y again " ) ;}
}}
53 / 57
Communication Asynchrone : AJAX
JQuery propose une fonction $.ajax(obj) simplifiantgrandement la mise en œuvre d’AJAXLe paramètre obj est un objet contenant les attributssuivants :
type : methode GET ou POSTdata : chaine contenant les données à envoyer (ou objetavec attributs simples), à la manière des informationsajoutées à l’URL par GETdataType : type de données que l’on attend en retour("text", "json", "xml", "html", "script")error : Fonction à appeler en cas de problème au cours dela communicationsuccess : Fonction à appeler en cas de succès de lacommunication (cette fonction doit attendre un argumentqui contiendra les données de réponse formatées selondataType)url : url de la ressource à interroger (Servlet dans notre cas)
54 / 57
Communication Asynchrone : AJAX
AJAX avec JQuery
$ . a jax ( {type : "POST" ,u r l : " A joutSupContactServ le t " ,data : " i d ="+env . a c t i f +"& i d _ u t i l ="+ user . i d +"& contac t = "+ ( ( user . con tac t ) ? 0 : 1 ) ,dataType : " json " ,success : f u n c t i o n ( rep ) {
i f ( ( rep . e r r o r ==undef ined ) | | ( rep . e r r o r ==0) ) {i f ( user . con tac t ) {
a l e r t ( user . l o g i n +" r e t i r é de vo t re l i s t e de contac ts " ) ;user . con tac t= f a l s e ;
}e lse {
a l e r t ( user . l o g i n +" a jou té à vo t re l i s t e de contac ts " ) ;user . con tac t= t rue ;
}}e lse {
i f ( rep . e r r o r ==1){a l e r t ( " Problème base de données " ) ;
}e lse {
a l e r t ( " Problème serveur " ) ;}
}} ,e r r o r : f u n c t i o n ( jqXHR , tex tS ta tus , errorThrown ) {
a l e r t ( t e x t S t a t u s ) ;}
} ) ;
55 / 57
Communication Asynchrone : AJAX
A noterPas de redirection avec AJAX
Avec AJAX, l’émission de la requête et la gestion de laréponse sont réalisées sur la même pageAJAX ne gère donc pas les redirections vers d’autres pages
⇒ Se connecter sur connexion.html et obtenir la réponse surmain.html est alors impossible en AJAX
⇒ Utiliser pour cela d’autres techniques (telles que JSP)
Upload de fichier difficilePar sécurité, les navigateurs interdisent à Javascript derécupérer le fichier renseigné dans un input de type file
⇒ Utilisation de XMLHttpRequest alors impossible⇒ Passer par des iframes
56 / 57
Communication Asynchrone
Discussion intéressante sur les avantages / inconvénients del’utilisation de XMLHttpRequest plutôt que de passer par desiframes :
http://ajax.sys-con.com/node/188390
57 / 57