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

Requêtes AJAX

Le premier exercice consiste à faire une requète AJAX, dans le second exercice à faire plusieurs requètes AJAX et enfin dans le dernier exercice à ré-implanter le fichier JavaScript de l'exercice 2 avec des Promise

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 tp7.
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.
Note: 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.

Exercice 3 - Un panier de fruits (3)

On cherche encore à améliorer le code précédent en évitant de faire des callbacks dans les callbacks en utilisant le mécanisme de promesse (Promise).

Recopier les fichiers HTML et js de l'exercice précédent (dans exo3 et basket3.js) puis modifier les pour utiliser fetch à la place d'un objet HttpXmlRequest.
Vérifier que vous enchainez les fetch correctement, avec le mécanisme de promesse.