Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication...

57
Développement Web Communication Client-Serveur LI328 Sylvain Lamprier UPMC 1 / 57

Transcript of Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication...

Page 1: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Développement WebCommunication Client-Serveur

LI328Sylvain Lamprier

UPMC

1 / 57

Page 2: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 3: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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 en­têtes

200 en­têtes

3 / 57

Page 4: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 5: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 6: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 7: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 8: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 9: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 10: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 11: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Communication Client-Serveur

Le protocole HTTP

11 / 57

Page 12: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 13: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 14: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Les protocoles normalisés de l’ISO(International Standards Organisation)

Modèle OSI(Open Systems Interconnection)

14 / 57

Page 15: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 16: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 17: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 18: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 19: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 20: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 21: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Communication Client-Serveur

Génération de contenu

21 / 57

Page 22: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Communication par génération de contenu

22 / 57

Page 23: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Communication par génération de contenu

23 / 57

Page 24: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 25: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 26: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 27: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Communication Client-Serveur

Insertion de contenu

27 / 57

Page 28: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 29: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 30: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 31: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 32: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Communication par insertion de contenu

32 / 57

Page 33: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 34: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 35: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 36: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 37: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 38: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 39: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 40: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 41: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 42: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 43: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Communication Client-Serveur

Communication asynchrone

43 / 57

Page 44: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 45: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 46: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 47: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 48: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 49: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 50: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

Communication asynchrone

50 / 57

Page 51: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 52: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 53: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 54: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 55: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 56: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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

Page 57: Développement Web - Communication Client-Serveursoulier/data/TechnoWeb/cours9.pdf · Communication Client-Serveur 1 Le protocole HTTP 2 Communication par génération 3 Communication

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