Nous avons dit dans l'étude précédente que le client Web disposait de deux méthodes pour envoyer à un serveur Web les valeurs d'un formulaire qu'il a affiché : les méthodes GET et POST. Voyons sur un exemple la différence entre les deux méthodes.
2.5.3.1
Méthode GET
<form method="get" action="FormulaireGet.aspx">
Lorsque l'utilisateur va cliquer sur le bouton [1], les valeurs saisies dans le formulaire vont être envoyées à la page ASP.NET [2]. Celle-ci ne fait rien de ces paramètres et renvoie une page vide. On veut seulement savoir comment le navigateur transmet les valeurs saisies au serveur web. Pour cela, nous allons utiliser un outil de débogage disponible dans Chrome. On l'active en tapant CTRL-I (majuscule) [3] :
Comme nous nous intéressons aux échanges réseau entre le navigateur et le serveur web, nous activons ci-dessus l'onglet [Network] puis nous cliquons sur le bouton [Envoyer] du formulaire. Celui-ci est un bouton de type [submit] à l'intérieur d'une balise [form]. Le navigateur réagit au clic en demandant l'URL [FormulaireGet.aspx] indiquée dans l'attribut [action] de la balise [form], avec la méthode GET indiquée dans l'attribut [method]. Nous obtenons alors les informations suivantes :
1
2
La copie d'écran ci-dessus nous montre l'URL demandée par le navigateur à l'issue du clic sur le bouton [envoyer]. Il demande bien l'URL prévue [FormulaireGet.aspx] mais derrière il rajoute des informations qui sont les valeurs saisies dans le formulaire. Pour avoir plus d'informations, nous cliquons sur le lien ci-dessus :
Ci-dessus [1, 2], nous voyons les entêtes HTTP envoyés par le navigateur. Ils ont été ici mis en forme. Pour voir le texte brut de ces entêtes, nous suivons le lien [view source] [3, 4]. Le texte complet est le suivant :
1. GET /FormulaireGet.aspx? R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+ de%0D%0Ala+programmation+web%0D %0A&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneVal eur HTTP/1.1 2. Host: localhost:56376 3. Connection: keep-alive 4. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
5. User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
6. Referer: http://localhost:56376/HtmlFormulaire.html 7. Accept-Encoding: gzip,deflate,sdch
8. Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Nous retrouvons des éléments déjà rencontrés précédemment. D'autres apparaissent pour la première fois :
Connection: keep-
alive le client demande au serveur de ne pas fermer la connexion après sa réponse. Cela lui permettra d'utiliserla même connexion pour une demande ultérieure. La connexion ne reste pas ouverte indéfiniment. Le serveur la fermera après un trop long délai d'inutilisation.
Referer l'URL qui était affichée dans le navigateur lorsque la nouvelle demande a été faite.
La nouveauté est ligne 1 dans les informations qui suivent l'URL. On constate que les choix faits dans le formulaire se retrouvent dans l'URL. Les valeurs saisies par l'utilisateur dans le formulaire ont été passées dans la commande GET URL? param1=valeur1¶m2=valeur2&... HTTP/1.1 où les parami sont les noms (attribut name) des contrôles du formulaire Web et valeuri les valeurs qui leur sont associées. Nous présentons ci-dessous un tableau à trois colonnes :
2 1
4 3
colonne 1 : reprend la définition d'un contrôle HTML de l'exemple ; colonne 2 : donne l'affichage de ce contrôle dans un navigateur ;
colonne 3 : donne la valeur envoyée au serveur par le navigateur pour le contrôle de la colonne 1 sous la forme qu'elle a dans la requête GET de l'exemple.
contrôle HTML visuel valeur(s) renvoyée(s)
<input type="radio" value="Oui" name="R1"/>Oui
<input type="radio" name="R1" value="non" checked="checked"/>Non
R1=Oui
- la valeur de l'attribut value du bouton radio coché par l'utilisateur.
<input type="checkbox" name="C1" value="un"/>1
<input type="checkbox" name="C2" value="deux" checked="checked"/>2 <input type="checkbox" name="C3" value="trois"/>3
C1=un C2=deux
- valeurs des attributs value des cases cochées par l'utilisateur
<input type="text" name="txtSaisie"
size="20" value="qqs mots"/> txtSaisie=programmation+Web - texte tapé par l'utilisateur dans le champ de saisie. Les espaces ont été remplacés par le signe +
<input type="password" name="txtMdp"
size="20" value="unMotDePasse"/> txtMdp=ceciestsecret
- texte tapé par l'utilisateur dans le champ de saisie
<textarea rows="2" name="areaSaisie" cols="20"> ligne1 ligne2 ligne3 </textarea> areaSaisie=les+bases+de+la%0D%0A programmation+Web
- texte tapé par l'utilisateur dans le champ de saisie. %OD%OA est la marque de fin de ligne. Les espaces ont été remplacés par le signe +
<select size="1" name="cmbValeurs"> <option>choix1</option> <option selected="selected">choix2</option> <option>choix3</option> </select> cmbValeurs=choix3
- valeur choisie par l'utilisateur dans la liste à sélection unique
<select size="3" name="lst1"> <option selected="selected">liste1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select> lst1=liste3
- valeur choisie par l'utilisateur dans la liste à sélection unique
<select size="3" name="lst2" multiple="multiple"> <option selected="selected">liste1</option> <option>liste2</option> <option selected>liste3</option> lst2=liste1 lst2=liste3
- valeurs choisies par l'utilisateur dans la liste à sélection multiple
<option>liste4</option> <option>liste5</option> </select>
<input type="submit" value="Envoyer"
name="cmdRenvoyer"/> cmdRenvoyer=Envoyer
- nom et attribut value du bouton qui a servi à envoyer les données du formulaire au serveur
<input type="hidden" name="secret"
value="uneValeur"/> secret=uneValeur
- attribut value du champ caché
2.5.3.2
Méthode POST
Nous changeons le document HTML pour que le navigateur utilise maintenant la méthode POST pour envoyer les valeurs du formulaire au serveur Web :
<form method="post" action="FormulairePost.aspx">
Nous remplissons le formulaire tel que pour la méthode GET et nous transmettons les paramètres au serveur avec le bouton [Envoyer]. Comme il a été fait au paragraphe précédent page 39, nous avons accès dans Chrome aux entêtes HTTP de la requête envoyée par le navigateur :
1. POST /FormulairePost.aspx HTTP/1.1 2. Host: localhost:56376 3. Connection: keep-alive 4. Content-Length: 215 5. Cache-Control: max-age=0 6. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 7. Origin: http://localhost:56376
8. User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36 9. Content-Type: application/x-www-form-urlencoded 10. Referer: http://localhost:56376/HtmlFormulaire.html 11. Accept-Encoding: gzip,deflate,sdch 12. Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4 13. 14. R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=unMotDePasse&areaSaisie=Les+bases+d e+la%0D%0Aprogrammation+web%0D %0A&cmbValeurs=choix2&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneVal eur
Des nouveautés apparaissent dans la requête HTTP du client :
POST URL HTTP/1.1 la requête GET a laissé place à une requête POST. Les paramètres ne sont plus présents dans cette première ligne de la requête. On peut constater qu'ils sont maintenant placés (ligne 14) derrière la requête HTTP après une ligne vide. Leur encodage est identique à celui qu'ils avaient dans la requête GET.
Content-Length nombre de caractères "postés", c.a.d. le nombre de caractères que devra lire le serveur Web après avoir reçu les entêtes HTTP pour récupérer le document que lui envoie le client. Le document en question est ici la liste des valeurs du formulaire.
Content-type précise le type du document que le client enverra après les entêtes HTTP. Le type [application/x-www- form-urlencoded] indique que c'est un document contenant des valeurs de formulaire.
Il y a deux méthodes pour transmettre des données à un serveur Web : GET et POST. Y-a-t-il une méthode meilleure que l'autre ? Nous avons vu que si les valeurs d'un formulaire étaient envoyées par le navigateur avec la méthode GET, le navigateur affichait dans son champ Adresse l'URL demandée sous la forme URL?param1=val1¶m2=val2&.... On peut voir cela comme un avantage ou un inconvénient :
• un avantage si on veut permettre à l'utilisateur de placer cette URL paramétrée dans ses liens favoris ;
• un inconvénient si on ne souhaite pas que l'utilisateur ait accès à certaines informations du formulaire tels, par exemple, les champs cachés.
Par la suite, nous utiliserons quasi exclusivement la méthode POST dans nos formulaires.
2.6 Conclusion
Ce chapitre a présenté différents concepts de base du développement Web : • les échanges client-serveur via le protocole HTTP ;
• la conception d'un document à l'aide du langage HTML ; • la conception de formulaires de saisie.
Nous avons pu voir sur un exemple comment un client pouvait envoyer des informations au serveur Web. Nous n'avons pas présenté comment le serveur pouvait
• récupérer ces informations ; • les traiter ;
• envoyer au client une réponse dynamique dépendant du résultat du traitement.
C'est le domaine de la programmation Web, domaine que nous abordons dans le chapitre suivant avec la présentation de la technologie ASP.NET MVC.