Le client et le serveur au café
Au café, le client passe commande, le serveur va en cuisine et revient avec le thé. Sur le web, le navigateur (client) envoie une requête, l'ordinateur distant (serveur) prépare la réponse et la renvoie.
M05 · A. Définir le rôle de JavaScript dans le développement
L'architecture client/serveur d'une application web
Comprendre les rôles du client et du serveur, le dialogue requête/réponse en HTTP, et ce qui s'exécute de chaque côté dans une application web.
1Situer
Sur le site d'une pharmacie de garde à Rabat, le visiteur choisit son quartier et voit la liste des pharmacies ouvertes ce soir. Une partie du travail se fait sur son téléphone (le choix, le filtrage, l'affichage), une autre sur un ordinateur distant (la liste à jour des gardes). Savoir qui fait quoi est la base de tout projet web.
2Comprendre
Le client (le navigateur du téléphone), le serveur (le programme de l'application) et la base de données.
1 / 6
Deux rôles
- Le client : le navigateur (ou une application mobile). Il demande des ressources et les affiche. Il exécute le HTML, le CSS et le JavaScript.
- Le serveur : un ordinateur toujours allumé. Il répond aux demandes. Il exécute le programme de l’application (PHP, Node.js, Python…) et accède à la base de données.
Ils dialoguent avec le protocole HTTP (ou HTTPS, chiffré) : le client envoie une requête, le serveur renvoie une réponse.
Une requête, une réponse
| Partie | Exemple |
|---|---|
| méthode | GET (lire), POST (envoyer), PUT, DELETE |
| adresse | /pharmacies?quartier=agdal |
| code de réponse | 200 OK, 404 introuvable, 500 erreur serveur |
| contenu de la réponse | HTML, CSS, JS, images, ou données JSON |
Trois niveaux
- Présentation : le navigateur (HTML, CSS, JavaScript).
- Traitement : le serveur d’application (PHP, Node.js avec Express…).
- Données : la base de données (MySQL, MongoDB…).
Ce que JavaScript change
Avant, chaque clic rechargeait toute la page. Aujourd’hui, JavaScript peut demander seulement les données au serveur en arrière-plan (AJAX, partie E) et mettre à jour une partie de la page. Le même langage s’exécute aussi côté serveur avec Node.js (module 2e année).
Ce que voit le navigateur
Le navigateur ne reçoit jamais le code PHP ou la base de données : il ne reçoit que le résultat, du HTML, du CSS, du JavaScript et des données (souvent en JSON).
GET /pharmacies?quartier=agdal (requête du client)
200 OK (réponse du serveur)
[{"nom": "Pharmacie Atlas", "tel": "0537..."}] Publicité
3Manipuler
Dans l'application des pharmacies de garde, chaque tâche s'exécute soit sur le téléphone du visiteur (client), soit sur le serveur. Classez-les, puis cliquez sur « Vérifier ».
Afficher la page et ses couleurs (HTML et CSS)
Lire la liste des gardes dans la base de données
Cacher les pharmacies fermées quand on coche « Ouvertes maintenant » (JavaScript)
Vérifier le mot de passe du pharmacien qui met à jour les gardes
Afficher un message si le champ quartier est vide, avant l'envoi
Enregistrer la nouvelle garde de la semaine
Exécuter le code PHP ou Node.js de l'application
Centrer la carte sur la position GPS du visiteur
4Pratiquer
Exercice 1 · Le trajet d'une requête
Décrivez, en 5 étapes, ce qui se passe entre le moment où le visiteur tape l'adresse du site des pharmacies et l'affichage de la liste.
Voir le corrigé
1. Le navigateur trouve l'adresse IP du serveur (DNS). 2. Il envoie une requête HTTP : GET /pharmacies?quartier=agdal 3. Le serveur exécute son programme (PHP, Node.js...) qui interroge la base de données. 4. Il renvoie une réponse : HTML (ou JSON) avec le code 200. 5. Le navigateur affiche la page et exécute le JavaScript reçu.
Exercice 2 · Pourquoi vérifier deux fois ?
Le JavaScript vérifie déjà que l'e-mail contient un @. Pourquoi le serveur doit-il le vérifier encore ?
Voir le corrigé
Le code côté client est entre les mains du visiteur : il peut désactiver JavaScript, modifier le code avec F12 ou envoyer une requête directement. Le client vérifie pour le confort ; le serveur vérifie pour la sécurité.
Exercice 3 · Les codes de réponse
Que signifient les codes HTTP 200, 404 et 500 ?
Voir le corrigé
200 : OK, la réponse contient ce qui a été demandé 404 : la ressource demandée n'existe pas 500 : erreur dans le programme du serveur
Publicité