Le protocole HTTP - Introduction

Introduction au protocole HTTP

Sans le savoir, tu utilises déjà HTTP tous les jours. Le protocole HTTP régit la communication entre toi et les sites que tu consultes quotidiennement, comme par exemple http://odyssey.wildcodeschool.fr). C'est selon ses règles à lui que tu peux naviguer sur le Web aujourd'hui.

Donc, HTTP c'est avant tout deux principes-clés :

1. Le client effectue une requête,
2. Le serveur lui renvoie une réponse.

Le client, c'est toi au travers de ton navigateur sur ton PC ou ton Mac, ou au travers de ton application favorite sur IPhone ou Android.

Le serveur, c'est là qu’est hébergé le site web auquel tu tentes d’accéder, que ce soit Google, Facebook ou le petit site vitrine du restaurant en bas de ta rue. Pour le protocole HTTP, ce n'est pas la taille (du site web) qui compte. Il traite tous les sites exactement de la même manière.

Mais voilà, en tant que développeur, tu ne dois pas seulement l'utiliser, tu te dois de le comprendre et de l'apprivoiser.

Tu vas découvrir que les interlocuteurs ne se contentent pas de communiquer avec une adresse Web et avec du code HTML. Il se passe beaucoup de choses en coulisses.

🤓 À la fin de cette quête, tu seras capable de :

• ✅ Connaître le protocole HTTP,
• ✅ Comprendre les réponses relatives à une requête,
• ✅ Exploiter les outils.

Sommaire

En-têtes

Lorsqu'un client et un serveur communiquent via HTTP, ils échangent beaucoup d'informations. Ce n'est pas pour rien qu'on l'appelle protocole.

Ces informations sont transmises grâce aux en-têtes, ou headers.

Si tu ouvres un nouvel onglet de ton navigateur et que tu accèdes au panneau "outils de développeur" tu dois trouver un onglet "Réseaux" ou "Network" disponible.

Sélectionne cet onglet d'inspecteur de réseaux et va sur www.google.fr. Tu devrais avoir à peu près ce résultat :

Tu vois toute une liste d’éléments défiler sous tes yeux, ce sont tous les éléments (images, css, javascript, ..) qui sont chargés par la page actuelle.

Si tu remontes au sommet de cette liste, tu as la ligne du document principal demandé, soit www.google.fr. Clique sur cette ligne. L'affichage change pour te montrer toutes les informations échangées entre le client et le serveur lors de cette requête.

C'est avec ces informations de headers que le client et le serveur discutent. Sur cet outil, on distingue trois grandes parties :

1. General : C'est un résumé des informations importantes échangées entre le Client et le Serveur,

2. Response Headers : Ce sont les informations fournies par le Serveur,

3. Request Headers : Ce sont les informations fournies par le Client lorsqu'il effectue sa demande.

Tu peux constater qu'ils sont très bavards. En plus de parler beaucoup, ce sont de vrais "poissons rouges". D'un échange à l'autre, aucune information n'est retenue. Ils doivent à chaque fois se redire les mêmes choses.

Quelques exemples d'en-têtes parmi les plus notables :

• Referer : Il s'agit de l'adresse de la page Web précédente, à partir de laquelle un lien vers la page actuellement demandée a été suivi. (Le mot "referrer" a été mal orthographié dans la RFC, ainsi que dans la plupart des implémentations, au point qu'il est devenu une utilisation standard et est considéré comme une terminologie correcte),

• User-Agent : L'identification du client ayant effectué la requête (Navigateur, curl, ...),

• Cookie : Les informations stockées dans les cookies relatives au serveur sollicité,

• Host : Le nom de domaine du serveur et le numéro de port TCP sur lequel le serveur écoute. Le numéro de port peut être omis si le port est le port standard pour le service demandé.

Les méthodes, ou verbes.

Il y a une information du Header dont je n'ai pas parlé dans le chapitre précédent, c'est l’en-tête method car celui-ci mérite une partie dédiée. Cette méthode, que l'on appelle aussi verbe, va permettre au client de spécifier plus précisément au serveur ce qu'il attend de lui .

Il y a deux principaux verbes que tu dois parfaitement connaître pour le moment, qui sont:

• GET (obtenir) : C'est la méthode par défaut qu'utilise ton navigateur pour communiquer avec le serveur. Elle permet de simplement récupérer une ressource. On fait transiter par l'URL les informations nécessaires dont le serveur a besoin pour identifier notre besoin et le renvoyer. Soit il s'agit d'une simple URL, toute belle, soit on doit passer différents paramètres sous la forme ?param1=value1&param2=value2&param3=value3, qui plus concrètement peut ressembler à ça www.monblog.com?category=web&page=2. On informe le serveur que nous voulons filtrer par catégorie "web" et afficher les articles en seconde page. Tu auras noté que, selon la norme, le premier paramètre est précédé d'un ? et les suivants de &

• POST (poster/envoyer) : Crée ou mets à jour une ressource. Les demandes POST comportent habituellement une série d'informations qui spécifient les données à transmettre au serveur. Ces informations sont contenues dans le "body" de la requête. Tu auras l'occasion de voir plus en détail cette méthode durant la quête sur les formulaires.

Plus tard, tu entendras parler d'autres verbes comme :

• PUT (mettre/poser) : Utilisé dans le but de faire une mise à jour.

• DELETE (supprimer) : Pour supprimer une ressource existante.

Mais chaque chose en son temps.

HTTP Request Methods

Une courte illustration des méthodes (4:45). Si tu souhaites, tu peux poursuivre les vidéos à partir de cet épisode.

Codes retours

Il y a une dernière information du Header, dont je n'ai pas encore parlé dans les chapitres précédents, c'est l’en-tête status, car celui-ci aussi requiert une partie dédiée.

Tu as peut-être déjà entendu parler de "l'erreur 404" ? Sur un site internet, lorsque tu arrives sur une page qui n'existe pas , c'est ce code erreur qui est envoyé. Comme par exemple wildcodeschool.fr/pagequinexistepas. Si tu regardes dans l'inspecteur de réseaux de ton navigateur, tu vas pouvoir voir :

C'est un code à trois chiffres qui permet d'indiquer au client comment gérer la réponse du serveur. Le chiffre des centaines permet de catégoriser le type de retour.

• 2xx, Succès : Cela indique au client que la demande a été traitée avec succès. Le code le plus courant est 200 OK. Tout s'est bien passé, ce qui arrive dans la majorité des cas.

• 3xx, Redirection : Il permet de rediriger le client vers une URL différente, pour récupérer la ressource désirée. Par exemple, dans le cas où une page aurait définitivement changé d’URL, on peut renvoyer le code 301.

• 4xx, Erreur du client : Permet d'indiquer que le client demande une ressource invalide. Tu auras reconnu notre exemple précédemment cité, la 404 où l'adresse n'existe pas. Mais il peut aussi s'agir de "401 Unauthorized". Dans ce cas-là, il est nécessaire de s'identifier sur le site pour accéder à la ressource.

• 5xx, erreur serveur : Indique une défaillance du serveur lors du traitement de la demande. Le code d'erreur le plus couramment utilisé est 500 Internal Server Error. Cela peut venir d'un script ou d'une mauvaise configuration.

Connaître les types de retours et leurs principaux codes te permettra de mieux comprendre et maîtriser les retours d'une application Web. Qu'il s'agisse du débug de ta propre application comme de l'exploitation des ressources d'un service Web tiers.

🕵️ As-tu tout bien compris ?

false|||true|||true
# What is the meaning of HTTP ?
[x] Hyper Text transfer Protocol
[] Hyper Text Markup Language
[] High Transfer Message Public
[] Hyper Text Markup Protocol
# PUT, PATCH, DELETE are called
[x] Verbs
[x] Methods
[] Word
[] Requests
# The logical order is
[x] First, client send a request, then, server send a response
[] First, server send a request, then, client send a response
[] First, client send a response, then, server send a request 
[] First, server send a response, then, client send a request 
# A query parameter 
[x] start with a `?` and data separated by `&`
[] start with a `#` and data separated by `;`
[] start with a `&` and data separated by `?`
[] start with a `?` and data separated by `|`
# A status code 200 is
[x] A good news
[] A bad news
# A status code 301 means
[x] It's life, people change, URLs too !
[] You tried to access page you are not supposed too
[] You forgot your password
# A status code 404 is
[] A good news
[x] A bad news
# A status code 500 is
[] A good news
[] A bad news
[x] A very bad news