Passer au contenu principal

Comprendre les requêtes/réponses HTTP 📡

Lorsque vous visitez un site web ou utilisez une application, comment l'ordinateur et le serveur communiquent-ils ? Ils utilisent une règle appelée HTTP ! Laissez-moi vous l'expliquer de manière simple, même pour les débutants.

Comparer HTTP à la vie quotidienne ?​

Comparons HTTP à une commande au restaurant.

L'histoire du restaurant 🍽️​

1. Client : "Des pâtes s'il vous plaît !" (requête)
2. Serveur : Transmet à la cuisine
3. Cuisine : Prépare les pâtes
4. Serveur : "Voici vos pâtes !" (réponse)
5. Client : Reçoit les pâtes

HTTP fonctionne de la même manière :

1. Navigateur : "index.html s'il vous plaît !" (requête HTTP)
2. Serveur : Trouve le fichier
3. Serveur : "Le voici !" (réponse HTTP)
4. Navigateur : Affiche la page

Définition de HTTP​

HTTP (HyperText Transfer Protocol)

  • Règles pour l'échange de données entre le navigateur web et le serveur
  • Protocole = règles convenues
  • Méthode de communication de base du web

Flux de requête/réponse HTTP​

┌─────────┐                                ┌─────────┐
│         │   ── Requête HTTP (Request) →  │         │
│Navigateur│                                │ Serveur │
│         │   ← Réponse HTTP (Response) ── │         │
└─────────┘                                └─────────┘

Processus complet​

  1. Requête (Request) : Le navigateur demande quelque chose au serveur
  2. Traitement (Processing) : Le serveur traite la requête
  3. Réponse (Response) : Le serveur envoie le résultat au navigateur
  4. Rendu (Rendering) : Le navigateur affiche à l'écran

Méthodes HTTP (méthodes de requête)​

Ce sont des verbes qui indiquent au serveur "comment" faire quelque chose.

1. GET 📖​

"Obtenir" - Demander des données

GET /products/123

Exemples :

  • Voir une page web
  • Obtenir des résultats de recherche
  • Voir une liste de produits

Caractéristiques :

  • Obtient uniquement des données
  • Ne modifie pas les données du serveur
  • Les données sont visibles dans l'URL
  • Peut être mis en signet

Utilisation réelle :

https://google.com/search?q=javascript
                         └───────┬──────┘
                         Paramètres GET

2. POST 📝​

"Créer" - Envoyer de nouvelles données au serveur

POST /users
{
  "name": "Jean Dupont",
  "email": "jean@example.com"
}

Exemples :

  • Inscription d'un membre
  • Écriture d'un article
  • Passer une commande

Caractéristiques :

  • Crée des données sur le serveur
  • Les données sont dans le corps (Body)
  • Les données ne sont pas visibles dans l'URL
  • Ne peut pas être mis en signet

3. PUT ✏️​

"Modifier" - Remplacer complètement les données existantes

PUT /users/123
{
  "name": "Marie Martin",
  "email": "marie@example.com"
}

Exemples :

  • Modifier tout le profil
  • Modifier tout l'article

4. PATCH 🔧​

"Modifier partiellement" - Ne modifier qu'une partie des données existantes

PATCH /users/123
{
  "email": "newemail@example.com"
}

Exemples :

  • Changer uniquement l'email
  • Changer uniquement le mot de passe

5. DELETE 🗑️​

"Supprimer" - Supprimer des données

DELETE /users/123

Exemples :

  • Supprimer un compte
  • Supprimer un article
  • Supprimer un produit

Tableau comparatif des méthodes HTTP​

MéthodeUsageModification de donnéesEmplacement des données
GETLecture❌URL
POSTCréation✅Body
PUTModification complète✅Body
PATCHModification partielle✅Body
DELETESuppression✅URL

Structure d'une requête HTTP​

GET /api/users?page=1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token123

{Données du corps (pour POST, PUT, PATCH)}

Composants​

  1. Ligne de requête : GET /api/users HTTP/1.1

    • Méthode : GET
    • Chemin : /api/users
    • Version HTTP : 1.1

  2. En-têtes (Headers) : Informations supplémentaires

    Host: Quel serveur ?
    User-Agent: Quel navigateur ?
    Accept: Quel format recevoir ?
    Authorization: Informations d'authentification

  3. Corps (Body) : Données réelles (POST, PUT, PATCH)

Structure d'une réponse HTTP​

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 1234

{
  "id": 1,
  "name": "Jean Dupont"
}

Composants​

  1. Ligne de statut : HTTP/1.1 200 OK

    • Version HTTP : 1.1
    • Code de statut : 200
    • Message de statut : OK

  2. En-têtes (Headers) : Informations de réponse

    Content-Type: Quel format ?
    Content-Length: Taille des données

  3. Corps (Body) : Données réelles

Codes de statut HTTP 🚦​

Le serveur indique "ce qui s'est passé" avec un numéro.

2xx - Succès ✅​

CodeSignificationDescription
200OKSuccès !
201CreatedNouvellement créé
204No ContentSuccès mais rien à envoyer

3xx - Redirection 🔄​

CodeSignificationDescription
301Moved PermanentlyDéplacé de façon permanente
302FoundTemporairement ailleurs
304Not ModifiedNon modifié, utilisez le cache

4xx - Erreur client ❌​

CodeSignificationDescription
400Bad RequestRequête incorrecte
401UnauthorizedConnexion nécessaire
403ForbiddenPas d'autorisation
404Not FoundIntrouvable
429Too Many RequestsTrop de requêtes

5xx - Erreur serveur 🔥​

CodeSignificationDescription
500Internal Server ErrorProblème serveur
502Bad GatewayErreur de passerelle
503Service UnavailableService indisponible
Astuce

Consultez tous les codes de statut sur HTTP Status Guide !

Exemples pratiques​

Exemple 1 : Recherche 🔍​

Requête :

GET https://google.com/search?q=javascript

Réponse :

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>Résultats de recherche...</body>
</html>

Exemple 2 : Connexion 🔐​

Requête :

POST https://api.example.com/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "password123"
}

Réponse (succès) :

HTTP/1.1 200 OK
Content-Type: application/json

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": 1,
    "name": "Jean Dupont"
  }
}

Réponse (échec) :

HTTP/1.1 401 Unauthorized
Content-Type: application/json

{
  "error": "Invalid email or password"
}

Exemple 3 : Créer un article ✍️​

Requête :

POST https://api.example.com/posts
Content-Type: application/json
Authorization: Bearer token123

{
  "title": "Premier article",
  "content": "Bonjour !"
}

Réponse :

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 42,
  "title": "Premier article",
  "content": "Bonjour !",
  "createdAt": "2025-01-23T10:30:00Z"
}

Exemple 4 : Modifier le profil ✏️​

Requête :

PATCH https://api.example.com/users/me
Content-Type: application/json
Authorization: Bearer token123

{
  "email": "newemail@example.com"
}

Réponse :

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 1,
  "name": "Jean Dupont",
  "email": "newemail@example.com"
}

Exemple 5 : Supprimer un article 🗑️​

Requête :

DELETE https://api.example.com/posts/42
Authorization: Bearer token123

Réponse :

HTTP/1.1 204 No Content

Comprendre les en-têtes HTTP​

En-têtes de requête couramment utilisés​

Content-Type: application/json    # Format des données envoyées
Accept: application/json           # Format des données souhaitées
Authorization: Bearer token123     # Jeton d'authentification
User-Agent: Mozilla/5.0...         # Informations du navigateur
Cookie: session=abc123             # Cookie

En-têtes de réponse couramment utilisés​

Content-Type: application/json    # Format des données de réponse
Content-Length: 1234               # Taille des données
Set-Cookie: session=abc123         # Définir un cookie
Cache-Control: no-cache            # Paramètres de cache
Access-Control-Allow-Origin: *     # Paramètres CORS

Utiliser les outils HTTP​

Pratiquer avec API Tester​

Sur API Tester :

  1. Entrer l'URL
  2. Sélectionner la méthode (GET, POST, PUT, DELETE)
  3. Ajouter des en-têtes
  4. Écrire le corps (POST, PUT, PATCH)
  5. Cliquer sur le bouton Send !

Exemple de pratique​

Test de requête GET :

URL: https://api.github.com/users/github
Method: GET

Résultat :

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  ...
}

Questions fréquentes (FAQ)​

Q1 : Quand utiliser GET et POST ?​

R :

  • GET : Consultation de données (lecture seule)
  • POST : Création de données (écriture)

Q2 : Quelle est la différence entre PUT et PATCH ?​

R :

  • PUT : Remplace tout 
    PUT /users/1
    {"name": "Marie Martin", "email": "marie@example.com", "age": 25}
  • PATCH : Ne modifie qu'une partie 
    PATCH /users/1
    {"email": "newemail@example.com"}

Q3 : Pourquoi l'erreur 404 se produit-elle ?​

R : Lorsque la page ou les données demandées sont introuvables !

  • Erreur de frappe dans l'URL
  • Page supprimée
  • Chemin incorrect

Q4 : Qu'est-ce que l'erreur 500 ?​

R : Le serveur a un problème !

  • Erreur de code serveur
  • Échec de connexion à la base de données
  • Surcharge serveur

Q5 : Quelle est la différence entre HTTPS et HTTP ?​

R : La sécurité a été ajoutée !

  • HTTP : Transmission en texte clair (visible par tous)
  • HTTPS : Transmission cryptée (sécurisé) 🔒

CRUD et méthodes HTTP​

CRUD = Opérations de base sur les données

CRUDSignificationMéthode HTTP
CreateCréerPOST
ReadLireGET
UpdateModifierPUT / PATCH
DeleteSupprimerDELETE

Exemple : Articles de blog​

Afficher la liste des articles :  GET /posts
Lire un article :                 GET /posts/123
Créer un article :                POST /posts
Modifier un article :             PUT /posts/123
Supprimer un article :            DELETE /posts/123

API RESTful​

REST = Méthode de conception utilisant efficacement HTTP

Bon design d'API ✅​

GET    /users          # Liste des utilisateurs
GET    /users/123      # Utilisateur spécifique
POST   /users          # Créer un utilisateur
PUT    /users/123      # Modifier un utilisateur
DELETE /users/123      # Supprimer un utilisateur

Mauvais design d'API ❌​

GET  /getUsers
POST /createUser
POST /updateUser
POST /deleteUser

Prochaines étapes 🚀​

Si vous avez compris HTTP :

  1. ✅ API Tester - Envoyer directement des requêtes HTTP
  2. ✅ HTTP Status Guide - Apprendre tous les codes de statut
  3. ✅ cURL Converter - Convertir les commandes cURL
  4. ✅ Qu'est-ce qu'une API ? - Revoir le concept d'API
  5. ✅ Comprendre le format de données JSON - Données échangées via HTTP

Conclusion​

HTTP est la base du web ! 🌐

Points à retenir :

  • GET : Consultation (lecture)
  • POST : Création (écriture)
  • PUT/PATCH : Modification
  • DELETE : Suppression
  • Codes de statut : 2xx (succès), 4xx (erreur client), 5xx (erreur serveur)

En expérimentant avec API Tester, vous vous familiariserez rapidement ! 🎉

Maintenant, comprenez-vous comment les sites web et les serveurs communiquent ?