TD n°1 : Découverte de HTTP§

La console de développeur§

Pour ce TD, vous allez vous familiariser avec la console de développeur, disponible dans la plupart des navigateurs modernes. Les instructions qui suivent concernent Firefox et Chrome ; sur d’autres navigateurs, YMMV.

Firefox Chrome
Console développeur sous Firefox Console développeur sous Chrome
  • Pour ouvrir/fermer la console, tapez F12.
  • La console peut apparaître à droite de la page, plutôt qu’en dessous.
  • La console comporte plusieurs onglets. Celui qui nous intéresse dans cette séance est l’onglet Network/Réseau.

Requête et réponse§

  • Chaque échange entre le navigateur et le serveur est constitué de deux messages :

    • une requête (request), envoyée par le navigateur au serveur,
    • suivie d’une réponse (response), envoyée par le serveur au navigateur.

  • Recharchez la page avec CTRL+SHIFT+R, puis cliquez sur la première ligne (page1.html). Un nouveau panneau apparaît, affichant le détail de la requête et de la réponse, et comportant plusieurs onglets.

  • Cliquez sur l’onglet Response/Réponse. Cet onglet contient le contenu de la réponse du serveur.

    Questions

    • Le contenu de l’onglet Réponse correspond-il à ce que vous attendiez ?
    • À votre avis, que contiendra cette onglet pour la ligne style.css ?
    • Cliquez maintenant sur la ligne style.css. Le contenu de l’onglet Réponse correspond-il à ce que vous attendiez ?

  • Cliquez sur l’onglet Headers/En-têtes. Cet onglet les informations complémentaires includes dans les messages de requête et de réponse.

    Questions

    • Identifiez les trois parties de cet onglet, contenant 1) les informations générales, 2) les en-têtes de la réponse, 3) les en-têtes de la requête.
    • Essayez de deviner, d’après leurs noms, lequel des en-têtes de requête (envoyés par le navigateur), indique au serveur quelle est la langue préférée de l’utilisateur.
    • Essayer de deviner, d’après leurs noms lequel des en-têtes de réponse (envoyés par le serveur), indique au navigateur la date de dernière modification du fichier envoyé.
    • Quelle est la méthode utilisée par cette requête (Request method/Méthode de requête) ? Voyez vous des requêtes utilisant d’autres méthodes ?

    Indice

    Au fur et à mesure de l’avancée du cours, nous découvrirons la signification précise d’un certain nombre d’en-têtes et de méthodes.

Formulaires§

  • Depuis la page n°1, cliquez sur le lien vers le formulaire.

  • Remplissez le avec des données quelconques, puis cliquez sur Envoyer.

  • Vous aboutissez sur une page récapitulant les données que vous avez saisies.

    Questions

    • Quelle est la méthode utilisée par cette requête (Request method/Méthode de requête) ? Est-ce conforme avec ce que la page affiche.

  • Une requête POST se différencie d’une requête GET par le fait que le navigateur envoie des données au serveur.

  • Ces données sont visibles dans le panneau de détail :

    • dans l’onglet Parameters/Paramètres sous Firefox,
    • en bas de l’onglet Headers/En-têtes sous Chrome.

    Questions

    • Affichez, dans l’onglet correspondant, le contenu de la requête. Est-ce conforme avec ce que la page affiche.
    • Revenez au formulaire et saisissez-y des informations différentes. Constatez dans la console que le contenu de la requête change en conséquence.