Requêtes AJAX

Comme pour les TP précédents, on vous demande de créer un répertoire tp8 qui contiendra les exercices de cette feuille de TP et de faire un compte rendu de TP en HTML.

Exercice 1 : Un panier de fruits

On cherche à afficher le contenu d'un panier de fruit en faisant une requête AJAX puis en modifiant le DOM pour ajouter des lignes à une table HTML.

Recopiez les fichiers exo1.html, basket.js, fruitQuantities.json et HTTPServer.py dans votre répertoire tp8.
Dans la suite, vous devrez surtout modifier le code Javascript de basket.js.
On cherche à écrire une requête AJAX qui va lire le fichier fruitQuantities.json.
Créez un objet XMLHttpRequest, utilisez la méthode open() pour créer une requête sur le fichier fruitQuantities.json stocké sur le serveur Github (et non pas celui que vous avez copié localement), puis envoyez la requête au serveur avec la méthode send.
Comment faire pour savoir si la requête a réussi ou échoué en utilisant les outils de développement de votre navigateur ?
Testez si votre requête AJAX fonctionne avec Firefox et avec Chrome.
Que se passe-t-il si vous essayez d'envoyer une requête pour récupérer une copie locale du fichier fruitQuantities.json ? Si vous avez un message d'erreur, comment pouvez-vous expliquer le contenu de ce message d'erreur ?
En fonction de votre navigateur et de la version de celui-ci, il se peut que vous n'ayez pas pu accéder au fichier fruitQuantities.json. Pour éviter que ce genre de mésaventures ne se reproduise, vous allez lancer un serveur HTTP minimaliste sur votre propre machine. (Lisez bien toute la question, y compris le paragraphe qui commence par Attention, avant d'entamer les opérations qui suivent).
Pour ce faire, ouvrez un terminal, placez-vous dans le répertoire tp8, puis lancez la commande python HTTPServer.py. Vous venez de lancer votre serveur HTTP dans le répertoire tp8, et alors le fichier fruitQuantities.json est accessible depuis l'URL http://localhost:8080/fruitQuantities.json.

Attention : Si jamais votre ordinateur hébergeait déjà un service qui utilisait le port 8080, vous avez dû voir s'afficher un message d'erreur Port 8080 already in use. Dans ce cas, vous pouvez remplacer le port 8080 par le port 3000 (ou bien par n'importe quel port : il vous suffit de remplacer 3000 par votre numéro de port préféré) en lançant la commande suivante : python HTTPServer.py 3000. Le fichier fruitQuantities.json sera accessible depuis l'URL http://localhost:3000/fruitQuantities.json.
Note : Si jamais vous avez l'habitude d'utiliser une autre commande ou méthode pour exécuter des scripts python, faites comme d'habitude. L'essentiel étant d'exécuter le script HTTPServer.py.
Ajoutez une fonction pour écouter les événements readystatechange et si la requête a réussi, affichez le résultat de la propriété responseText dans la console.
Transformez la chaine de caractère stockée dans responseText au format JSON en objet JavaScript.
Quel est le type de variable JavaScript obtenue ?
Affichez, dans la console, un tableau contenant les noms des champs stockés dans votre objet JSON.
Note : Quelle fonction permet de créer un tel tableau ?
Actuellement, le document exo1.html contient une table HTML. À l'aide de JavaScript, récupérez l'élément HTML correspondant à cette table, puis modifiez la table pour faire en sorte qu'elle contienne une ligne par fruit et deux colonnes : la première colonne contiendra le nom du fruit, et l'autre la quantité du fruit.
Note : Vous devez modifier votre élément HTML uniquement à l'aide de votre code Javascript, et certainement pas en réécrivant à la main des portions du document exo1.html.
On souhaite maintenant que le span quantity de la page HTML soit mis à jour avec la somme des quantités de tous les fruits. Comment faire ?

Exercice 2 : Combien ça coûte ?

On cherche à améliorer le code précédent pour calculer le prix du panier (en plus de la quantité de tous les fruits).
Pour cela, on va créer un nouveau fichier JSON (prices.json), contenant le prix d'une orange, d'une banane et d'une poire (et aucune autre information), et qui sera chargé pour calculer le prix d'un panier.

Recopiez la page Web exo2.html dans votre répertoire tp8 puis recopiez votre fichier basket.js dans le fichier basket2.js.
Quelle doit être la structure de données décrite dans le fichier prices.json ?
Note : vous devez choisir votre structure en fonction de la façon dont vous voulez utiliser vos données
Note 2 : si vous pensez à un tableau, pensez plus fort ! :-)
Écrivez le fichier prices.json sachant que le prix d'une orange est 10 euros, le prix d'une banane est 20 euros et le prix d'une poire est 5 euros.
Vérifiez que votre fichier respecte bien le format JSON en utilisant le validateur de JSON http://jsonlint.com/.
Faites en sorte que le fichier prices.json soit chargé par une requête AJAX.
Note : sachant que l'on charge déjà le fichier fruitQuantities.json avec une requête AJAX, faire en sorte qu'il y ait un seul code de chargement de requête AJAX (en faisant une fonction dont les deux arguments seront l'URL de la ressource que l'on veut charger et la fonction que l'on souhaitera appeler au moment où cette ressource aura été chargée).
Faites en sorte de calculer le prix du panier et de mettre à jour la page Web avec le prix.

Exercice 3 : Les promesses n'engagent que ceux qui y croient

Recopiez la page Web exo3.html dans votre répertoire tp8 puis recopiez votre fichier basket2.js dans le fichier basket3.js.
Récupérer l'objet contenu dans le fichier prices.json sans créer de requête AJAX à la main, mais en s'aidant de la fonction fetch et de promesses.
Faites en sorte de calculer le prix du panier et de mettre à jour la page Web avec le prix, mais en utilisant la fonction fetch et des promesses.