Pour l'instant, vous avez appri à écrire des pages au format HTML et CSS, qui sont des langages de
formatage:
Vous pouvez remarquer le préfixe file:// qui signifie qu'on est en train d'accéder à un fichier
simplement situé sur le disque dur de l'ordinateur. Dans ce cas, nous sommes en train d'écrire des
pages web, mais elles ne sont pas visibles sur le réseau.
Lorsque vous chargez une page sur internet, vous vous connectez à un autre ordinateur (un serveur)
distant qui répond à vos requêtes à travers un protocole nommé http:
Le protocole HTTP permet au serveur de délivrer des fichiers aux clients qui les lui demandent. Cependant,
héberger des fichiers statiques sur le réseau de manière à ce qu'il soit atteignable par d'autres machines
n'est pas vraiment la chose sur laquelle nous allons nous focaliser dans ce cours.
Tout d'abord, le protocole HTTP lui-même (1) ne contient pas que l'adresse d'un fichier qur l'on
souhaite télécharger, mais aussi des paramètres, qui proviennent par exemple d'un formulaire.
Aussi, un serveur web (et donc HTTP) ne fait pas que délivrer des fichiers statiques (comme notre index.html)
ici, mais il peut aussi éxécuter du code au moment où il traite une requête (2), et donc générer sa réponse
à la volée, en fonction par exemple du contenu d'une base de données (3).
Protocole
HTTP est un protocole applicatif textuel construit au dessus de TCP/IP, et utilisé
par les navigateurs pour communiquer avec les serveurs web.
Comme nous allons le voir, sa structure de base est assez simple
Le client se connecte à un port (par défaut 80) à travers TCP/IP, et envoie des
requêtes, auxquelles le serveur retourne des réponses.
Requête
Voici un simple exemple de requête:
GET / HTTP/1.1
Host: perdu.com
User-Agent: Mozilla Firefox
(ligne vide)
Ici:
GET est la méthode HTTP utilisée
/ est la ressource demandée au serveur
HTTP/1.1 est la version du protocole utilisé
Host: et User-Agent: sont des en-têtes de requête
Une ligne vide marque la fin de la requête
Réponse
Et un exemple de réponse:
HTTP/1.1 200 OK
Date: Thu, 02 Aug 2018 10:05:42 GMT
Server: Apache
Content-Type: text/html
<h1>Vous êtes perdus?</h1>
Ici:
HTTP/1.1 est la version du protocole
200 est le code de retour (ici "OK")
Date:, Server: et Content-Type: sont des en-têtes de réponse
Une ligne vide marque la séparation entre les en-têtes et le corps, juste en dessous
Les codes de retour
Les codes de retours permettent d'indiquer le statut de la requête:
200: OK, tout s'est bien passé
302: la ressource a changé d'adresse
404: ressource non trouvée
403: accès interdit
500: erreur serveur
...
Les en-têtes
Les en-têtes de requêtes et de réponses ont le même format:
Clé: Valeur
Ou Clé est le nom de l'en-tête et Valeur sa valeur. Elles peuvent avoir de nombreux
rôles, comme contrôler le cache, rediriger le navigateur du client etc.
Passage de paramètres
Les deux méthodes classiques permettant de passer des paramètres en HTTP sont les méthodes
GET et POST.
Méthode GET
La méthode GET consiste à passer un paramètre dans le nom de la ressource, après le délimiteur ?:
http://website.com/products/show?id=123
Ici, le paramètre id prend la valeur 123.
Il est possible de passer plusieurs paramètres à l'aide du délimiteur &:
On retrouve ici le paramètre id1 qui prend la valeur 123 et id2 qui prend la valeur 456.
D'ailleurs, si on crée un formulaire en HTML de ce type:
<form action="/products/compare" method="get">
Id du produit 1: <input type="text" name="id1"/>
Id du produit 2: <input type="text" name="id2"/>
<input type="submit" />
</form>
Et qu'on le soumet, nous arriverons sur une page ayant pour adresse /products/compare?id1=X&id2=Y ou X sera la valeur entrée dans le champ id1 et Y la valeur entrée dans le champ id2.
Méthode POST
La méthode POST est une autre manière de passer des paramètres:
<form action="/hello" method="post">
Quel est votre nom ?
<input type="text" name="nom"/>
<input type="submit" />
</form>
Ici, la méthode HTTP POST sera utilisée
Côté HTTP, la requête ressemblera à cela:
POST /hello HTTP/1.1
Host: website.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 7
nom=Bob
Ici:
POST est la méthode (contrairement à GET dans les exemples précédents)
Content-Type est utilisé pour indiquer que le corps de la requête contient des données de formulaire
Content-Length indique la longueur du corps
Le corps de la requête n'est pas vide comme précédemment, mais contient le ou les paramètres POST
Dans votre navigateur
Vous pouvez accéder à la console de développement pour voir les requêtes passer ainsi
que les informations sur le niveau HTTP.
