A la découverte des applications Web :
comprendre HTTP et les échanges avec d'un serveur

Objectifs: Ce TP a pour but de vous familiariser avec les outils de développement du navigateur pour observer les échanges HTTP entre une page et un serveur.

Documentations sur les outils de développement réseau Firefox et de Chrome

1. Observation des échanges HTTP avec les outils de développement du navigateur

Deux applications permettant d’effectuer des questionnaires en ligne ont été déployées sur le serveur lig-tdcge.imag.fr sous les noms QCM1 et QCM2. Vous pouvez les utiliser depuis les urls https://lig-tdcge.imag.fr/QCM1/ et https://lig-tdcge.imag.fr/QCM2/.

Du point de vue de l'utilisateur, ces deux applications ont le même comportement. Cependant elles sont différentes dans la manière dont les réponses sont gérées :

  • Dans l'une des deux applications les réponses proposées par l'utilisateur sont transmises à un programmme côté serveur qui se charge de leur évaluation.

  • Dans l'autre les réponses proposées par l'utilisateur sont évaluées côté client sans échange avec le serveur.

Question 1 : En utilisant les outils de développement web de votre navigateur (en particulier les outils réseau), déterminez laquelle des deux applications QCM1 ou QCM2 effectue le traitement des réponses côté serveur et laquelle effectue ce traitement côté client.

Question 2 : Dans cette question vous allez étudier plus finement les échanges entre le client et le serveur.

Avant tout chose fermez les éventuels onglets que vous avez utilisé pour accéder à QCM1 et QCM2 et effacez les cookies et données sites (données en cache) stockées par votre navigateur. La vidéo ci-dessous vous montre comment procéder avec le navigateur Firefox.

Effacement des données de cookies et du cache de Firefox

Ensuite connectez vous à l'application effectuant les traitements côté serveur, et étudiez de manière détaillée les requêtes et réponses HTTP lors des échanges entre le client et le serveur.

A chacun des échanges entre le client et le serveur tels qu'indiqués sur la figure ci-dessous il s'agit d'indiquer ce qu’envoie le client, ce que retourne le serveur et quelles sont les informations stockées localement par le navigateur.

Echanges HTTP entre le client et le serveur

Question 3 : Lorsque l'utilisateur soumet au serveur ses réponses à une question que renvoie le serveur ? A votre avis comment la réponse du serveur est-elle traitée côté client ?

Question 4 : Recommencez le quiz mais avant de soumettre votre réponse effacez tous les cookies du domaine .imag.fr. Que se passe-t-il alors lorsque votre réponse est envoyée au serveur ? A votre avis pourquoi ce cookie était-il nécessaire, à quoi aurait-il pu servir si l'application avait été plus complète ?

Question 5 : D’après vous quel sont les défauts que l’on peut reprocher à l’application effectuant les traitements des réponses côté client ?

2. Utilisation du stockage local

Téléchargez le fichier AWA_TP01_GestionnaireTaches.zip et décompréssez le. Cette archives contient une application web permettant de créer et gérer une liste de tâches. La structure du projet est la suivante. 

AWA_TP01_GestionnaireTaches/
├── gestionnaire-taches.html    # Page principale
├── css/
│   └── styles.css              # Styles de l'application
├── js/
│   └── gestionnaire.js         # Logique JavaScript
└── README.md                   # Explication sur l'application au format markdown

La page gestionnaire-taches.html propose l'interface suivante

  1. Entrer le texte d'une tâche dans le champ de saisie
  2. Cliquer sur "Ajouter" ou appuyer sur Entrée
  3. Cocher/décocher pour marquer comme complétée
  4. Utiliser les filtres pour afficher différentes vues
  5. Utiliser les boutons d'action pour supprimer en masse

Question : Lancez l'application gestionnaire-taches.html depuis VSCode avec liveServer. Créez quelques tâches. Arrêtez l'apllication (arrêtez liveServer)

  1. Relancez l'application et constatez que les tâches créés précédemment sont toujours présentes. Comment expliquez-vous cela ?
  2. Sosus quelle forme et où sont stockées les données représentant les tâches ? Pour cela utilisez les outils de développment du navigateur.
  3. Que se passe-t-il lorsque vous créez, modifiez, supprimez une tâches.
  4. Cherchez dans gestionnaire.js le code JavaScript qui permet de faire la persitence et de recharger les tâches au lancement de l'application.
  5. En vous inspirant de ce code, modifiez le jeu de bataille vu dans le TP 10 du cours TW pour peremttre de garder l'état du jeu lrosque l'application est arrêtée et reprendre celui-ci dans l'état où il était lorsque l'application est relancée.

3. Negociation de contenu

3.1 Documentation du serveur Apache HTTP

Le logiciel libre Apache HTTP Server (Apache) est un serveur HTTP créé et maintenu au sein de la fondation Apache. C'est l'un des serveurs HTTP le plus populaire du World Wide Web. Il est distribué selon les termes de la licence Apache.

La documentation du serveur apache est disponible à l'url https://httpd.apache.org/docs/2.4/ dans plusieurs langues.

Documentation d'Apache.

Lorsque vous tapez cette url dans votre navigateur, le serveur web d'apache vous fourni la documentation dans la langue qui correspond aux préférences de votre navigateur (par défaut c'est la langue de votre système). Il est possible de la changer comme le montre la vidéo ci-dessous (pour Firefox).

Choix de la langue préférée pour l'affichage des pages dans Firefox

  1. Chargez la page de documentation d'Apache HTTP Server, dans quelle langue s'affiche-t-elle ?

  2. Modifiez la langue préférée pour l'affichage des pages dans votre navigateur (en choisissant bien entendu l'une des langues disponibles por la documentation d'Apache HTTP Server)

  3. Rechargez la page documentation d'apache est vérifiez qu'elle s'affiche bien dans la langue que vous avez choisie

  4. En utilisant les outils de développement web de votre navigateur (en particulier les outils réseau), déterminez comment la requête HTTP pour charger la page transmet vos préférences de langue au serveur.

3.2 Redirection HTTP

"DBpedia est un projet universitaire et communautaire d'exploration et extraction automatiques de données dérivées de Wikipédia. Son principe est de proposer une version structurée et sous forme de données normalisées au format du web sémantique (format RDF Resources Description Framework) des contenus encyclopédiques de chaque fiche encyclopédique. DBpedia vise aussi à relier à Wikipédia (et inversement) des ensembles d'autres données ouvertes provenant du Web des données." (http://fr.wikipedia.org/wiki/DBpedia)

A chaque page Wikipedia dont l'URL est de la forme https://en.wikipedia.org/wiki/XXXXcorrespond une ressource DBpedia dont l'URI est http://dbpedia.org/resource/XXXX où XXXX désigne le sujet de la page. Par exemple, à la page consacrée à Grenoble (https://en.wikipedia.org/wiki/Grenoble) correspond la ressource http://dbpedia.org/resource/Grenoble.

  1. Tapez l'url http://dbpedia.org/resource/Grenoble dans la barre d'adresse de votre navigateur. Vous devez avoir l'affichage suivant :

    Affichage de la ressource http://dbpedia.org/resource/Grenoble dans un navigateur

  2. Observez l'url présente dans la barre d'adresse de votre navigateur et constatez qu'elle n'est plus la même que celle que vous avez tapée. En utilisant les outils de développement web de votre navigateur (en particulier les outils réseau), pouvez vous expliquer ce qui s'est passé.

  3. Essayez de renvoyer la requête en remplaçant dans l'en-tête Accept le type MIME text/html par text/turtle, Turtle est un format textuel pour les données RDF (RDF : Resource Description Framework). Que se passe-t'il ? Vers quelle URL votre votre requête est-elle redirigée ?

    Pour éditer et renvoyer une requête avec Firefox, consulter la page Edit and resend faulty network requests to debug them et plus précismeent le paragraphe Using Firefox's Edit and Resend feature de Patrick Brosset.