Envoi à un serveur web par un client web des valeurs d'un formulaire

1.7 Le langage HTML

1.7.2 Envoi à un serveur web par un client web des valeurs d'un formulaire

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. Nous reprenons l'exemple précédent et le traitons de la façon suivante :

1. un navigateur demande l'URL de l'exemple à un serveur web 2. une fois le formulaire obtenu, nous le remplissons

3. avant d'envoyer les valeurs du formulaire au serveur web en cliquant sur le bouton Envoyer de type submit, nous arrêtons le serveur web et le remplaçons par le serveur TCP générique déjà utilisé précédemment. Rappelons que celui-ci affiche à l'écran les lignes de texte que lui envoie le client web. Ainsi nous verrons ce qu'envoie exactement le navigateur.

L'URL utilisée pour ce document est la suivante :

1.7.2.1Méthode GET

Le document HTML est programmé pour que le navigateur utilise la méthode GET pour envoyer les valeurs du formulaire au serveur web. Nous avons donc écrit :

Nous arrêtons le serveur web et lançons notre serveur TCP générique sur le port 81 :

dos>java serveurTCPgenerique 81

Serveur générique lancé sur le port 81

Maintenant, nous revenons dans notre navigateur pour envoyer les données du formulaire au serveur web à l'aide du bouton

Envoyer :

<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3& cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1

<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd .ms-powerpoint, application/vnd.ms-excel, */*

<-- Referer: http://localhost:81/html/balises.htm <-- Accept-Language: fr

<-- Accept-Encoding: gzip, deflate

<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705) <-- Host: localhost:81

<-- Connection: Keep-Alive <--

Tout est dans le premier entête HTTP envoyé par le navigateur :

On voit qu'il est beaucoup plus complexe que ce qui avait été rencontré jusqu'à maintenant. On y retrouve la syntaxe GET URL

HTTP/1.1 mais sous une forme particulière GET URL?param1=valeur1&param2=valeur2&... HTTP/1.1 où les parami sont les noms

des contrôles du formulaire web et valeuri les valeurs qui leur sont associées. Examinons-les de plus près. Nous présentons ci- dessous un tableau à trois colonnes :

 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>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>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 +

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>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>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> <option selected>liste1</option> <option>liste2</option> <option selected>liste3</option> <option>liste4</option> <option>liste5</option> </select> lst2=liste1 lst2=liste3

- valeurs choisies par l'utilisateur dans la liste à sélection multiple

<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é}

Refaisons la même chose mais cette fois-ci en gardant le serveur web pour élaborer la réponse et voyons quelle est cette dernière. La page renvoyée par le serveur Web est la suivante :

C'est exactement la même que celle reçue initialement avant le remplissage du formulaire. Pour comprendre pourquoi, il faut regarder de nouveau l'URL demandée par le navigateur lorsque l'utilisateur appuie sur le bouton Envoyer :

L'URL demandée est /html/balises.htm. On passe de plus à cette URL des valeurs qui sont celles du formulaire. Pour l'instant, l'URL

/html/balises.htm qui est une page statique n'utilise pas ces valeurs. Si bien que le GET précédent est équivalent à

et c'est pourquoi le serveur nous a renvoyé de nouveau la page initiale. On remarquera que le navigateur affiche bien lui l'URL complète qui a été demandée :

1.7.2.2Méthode POST

Le document HTML est programmé pour que le navigateur utilise maintenant la méthode POST pour envoyer les valeurs du formulaire au serveur web :

Nous arrêtons le serveur web et lançons le serveur TCP générique (déjà rencontré mais un peu modifié pour l'occasion) sur le port 81 :

dos>java serveurTCPgenerique2 81 Serveur générique lancé sur le port 81

Maintenant, nous revenons dans notre navigateur pour envoyer les données du formulaire au serveur web à l'aide du bouton Envoyer :

Voici alors ce que reçoit le serveur TCP générique :

<-- POST /html/balises.htm HTTP/1.1

<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd .ms-powerpoint, application/vnd.ms-excel, */*

<-- Referer: http://localhost:81/html/balises.htm <-- Accept-Language: fr

<-- Content-Type: application/x-www-form-urlencoded <-- Accept-Encoding: gzip, deflate

<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705) <-- Host: localhost:81 <-- Content-Length: 210 <-- Connection: Keep-Alive <-- Cache-Control: no-cache <-- <-- R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D% 0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=une Valeur

Par rapport à ce que nous connaissons déjà, nous notons les changements suivants dans la requête du navigateur :

1. L'entête HTTP initial n'est plus GET mais POST. La syntaxe est POST URL HTTP/1.1 où URL est l'URL demandée par

Dans le document [PDF] Cours de programmation web php pdf methodes et applications | Cours Informatique (Page 36-40)