:: Enseignements :: ESIPE :: E3INFO :: 2019-2020 :: Programmation Web avec JavaScript ::

Requêtes AJAX

Comme pour les TPs précédents, on vous demande de créer un répertoire tp5 qui contiendra les exercices de cette feuille de TP et de faire un compte rendu de TP en HTML.
Pour ce TP, vous utiliserez la version 2015 de JavaScript.

Exercice 1 - Un panier de fruits

On cherche à afficher le contenu d'un panier de fruit en faisant une requête AJAX sur le fichier fruits.json situé dans le même répertoire que le fichier exo1.html puis en modifiant le DOM pour ajouter une lignes par fruit dans à une table HTML.

Dans un premier temps, recopier les fichiers exo1.html, basket.js et fruits.json contenu dans le répertoire td05
Rappeler quels sont les deux types d'objets JavaScript que l'on peut lire et écrire au format JSON ?
Qu'elle est le type d'objet stocké dans le fichier fruits.json .
On cherche à écrire une requête AJAX qui va lire le fichier fruits.json" sur le disque en local.
Créez un objet XMLHttpRequest, utilisez la méthode open() pour créer une requête sur le fichier fruits.json, puis envoyez la requête au serveur (ou au système de fichier si vous testez en local) 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 dans chaque cas, pourquoi ?
Pour résoudre le problème, on va utiliser un serveur de demo écrit en Java. Récupérer le fichier JExpress.java et lancer le dans un autre terminal avec la commande java JExpress.java
Note: Pas besoin de compiler le fichier, vous demanderez à votre prof de Java, pourquoi plus tard.
Comment faire pour afficher le contenu du fichier exo1.html en utilisant le serveur ?
Ajoutez une fonction pour écouter les évènements de la requète HTTP en enregistrant une fonction dans onreadystatechange. 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 d'objet JavaScript obtenu ? Est-ce bien ce que l'on attendait ?
Récupérez une référence sur la table HTML en JavaScript et modifiez la table pour ajouter une ligne par fruit, avec deux colonnes, une contenant le nom du fruit et l'autre la quantité du fruit.
Rappel: il faut utiliser window.onload pour être sûr que le DOM est créé au moment de faire un document.getElementById.
On souhaite maintenant que le div quantity de la page HTML soit mis à jour avec la somme des quantités de tous les fruits.
Note: il existe toujours une méthode reduce sur les tableaux.

Exercice 2 - Un panier de fruits (2)

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 autre fichier JSON, prices.json, contenant le prix d'une orange, d'une banane et d'une poire, qui sera chargé pour calculer le prix d'un panier.

Aller chercher le fichier exo2.html et recopier votre fichier basket.js dans un fichier basket2.js.
Note: vérifier bien que vous ne modifier plus le fichier basket.js sinon, je pourrais pas corriger l'exo1 et l'exo2 indépendamment !
Quelle doit être le type d'objet dans le fichier prices.json ?
Attention, si vous ne choisissez pas le bon type, la suite du TP va être longue et compliquée.
Ecrivez 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 contenu du fichier prices.json soit chargée par une requête AJAX après que le contenu du fichier fruits.json ait été chargé.
Important: sachant que l'on charge déjà le fichier fruits.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).
Faites en sorte de calculer le prix du panier et de mettre à jour la page Web avec le prix.
Optionnellement, commenter le code qui fait les requètes AJAX et utiliser le mécanisme de Promise pour ré-écrire votre code.
Pourquoi le mécanisme de Promise (si on l'utilise correctement) est plus efficace ?