:: Enseignements :: ESIPE :: E3INFO :: 2017-2018 :: Programmation Web avec JavaScript ::

Requêtes AJAX

Comme pour les TPs 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.
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 puis en modifiant le DOM pour ajouter des lignes à une table HTML.

Recopiez la page Web exo1.html dans votre répertoire tp5.
Faites de même avec le fichier basket.js
On cherche à écrire une requête AJAX qui va lire le fichier fruits.json.
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 ?
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 d'objet JavaScript obtenu ?
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 existe les méthodes map et join sur les tableaux.
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 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.

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 écrite dans le fichier prices.json ?
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 fichier prices.json soit chargé par une requête AJAX.
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.
Commenter le code qui fait les requètes AJAX et utiliser le mécanisme de Promise pour ré-écrire votre code.
Pourquoi utiliser le mécanisme de Promise est plus efficace ?