XHR et introduction à Ajax

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

XHR et introduction à Ajax

Notes de cours

Travail personnel

Objectifs

Ce TP comporte un exercice simple de manipulation de XHR, ainsi qu'un exercice de JavaScript (sans XHR) portant sur la validation de formulaire, un exemple classique où le JS apporte une amélioration à une page, sans être nécessaire à son fonctionnement.

Le 3e exercice, optionnel, est un exemple simpliste d'architecture Ajax, qui vous fait également utiliser des API de HTML5.

Exercice 1 — Récupération de couleurs #

Une proposition de correction est disponible (archive).

On met à votre disposition un service JSON. À chaque appel, il renvoie un tableau contenant dix objets représentant des couleurs. Chaque couleur a un nom (attribut name) et un code hexadécimal (attribut hex). (Les noms et les codes hexa sont tirés aléatoirement à chaque appel.)

Télécharger l'archive de l'exercice : elle contient un fichier couleurs.html et un fichier couleurs.js vide. On ne modifiera que le fichier JS.

  1. Faire en sorte que chaque clic sur le bouton fasse appel au service et ajoute dix nouvelles couleurs dans la liste. Chaque item ajouté doit contenir le nom de la couleur et avoir pour couleur de fond la couleur elle-même (exemple de rendu).
  2. Certaines couleurs sont trop sombres pour que le nom soit lisible. Faire en sorte qu'un clic sur une couleur affiche son nom en blanc, en utilisant la classe CSS prévue à cet effet.
  3. Optionnel (sort largement du cadre de l'exercice) : remplacer le clic sur un bouton par de l'infinite scrolling. Attention, l'infinite scrolling est rarement une solution adaptée d'un point de vue ergonomique.

Exercice 2 — Validation de formulaire #

Proposition de correction (archive).

Vous devez réaliser une validation de formulaire, de manière à obtenir un résultat similaire à la capture d'écran donnée en modèle. Certaines des fonctionnalités demandées sont faisables en pur CSS, mais on fera comme si ce n'était pas le cas (le but de l'exercice est de faire du JS).

Un formulaire avec des champs invalides.

Utiliser l'archive donnée pour effectuer cet exercice. Comme d'habitude, vous ne devez pas modifier le HTML et le CSS (ni le script PHP de récupération…), seulement le fichier JS.

  1. Définir un script vérifiant que lors de la soumission, le nom ne soit pas vide. Pour cela, on écoutera l'événement submit sur le formulaire. S'il est invalide, il faut interrompre cette soumission : on utilisera pour cela la méthode preventDefault() sur l'événement.
  2. Vérifier en plus que l'âge est positif et que 2 checkboxs au maximum sont sélectionnées.
  3. Lorsque l'internaute indique ne pas faire de recherches (boutons radio), vous devez cacher la sélection des moteurs de recherche, et l'afficher dans le cas contraire.
  4. Implémenter le bouton RAZ, qui enlève l'ensemble des données ajoutées dans les différents champs.

Exercice 3 (optionnel) — Site de poèmes en Ajax et HTML5 #

Cet exercice vise à faire une version Ajax d'un site de poèmes. Le but est d'écrire le JavaScript qui rend fonctionnelle la page de base.

Remarque importante : l'exercice est intéressant car il est parfois utile de charger des parties de page dynamiquement. Cependant, tel que le site est proposé, il est complètement absurde d'utiliser du JavaScript : on ne fait que réimplémenter des fonctionnalités de base du web… Malheureusement, de trop nombreux sites web font le choix de fonctionner de cette façon. Ne pas prendre cet exercice comme un exemple à suivre. Ce n'est qu'un entraînement à JS+Ajax+HTML5.

Télécharger l'archive de l'exercice : elle contient la page HTML, la feuille de style CSS, un fichier JS vide, les poèmes sous forme de fragments HTML, et des informations sur chaque poème au format JSON. Placer l'ensemble sur votre espace web personnel.

L'exercice consiste à créer le fichier JS ; il ne faudra pas modifier les autres fichiers.

Ajax

  1. Faire en sorte que cliquer sur le nom d'un poème dans le menu télécharge le poème en question en HTML (répertoire fragments/) et l'affiche dans le cadre de droite. Pour récupérer le HTML, on utilisera une requête XHR en forçant le type de réponse au format « document », puis on clonera le contenu de l'élément body pour le placer dans le DOM de notre page web.
  2. Modifier le code pour qu'en plus du poème, les informations le concernant soient téléchargées et affichées comme sur ce modèle. Les informations se trouvent dans le répertoire infos/ ; on les récupérera avec une requête XHR au format JSON, qui renverra un objet JavaScript dont on utilisera le contenu.
  3. Faire en sorte que le poème couramment affiché soit mis en valeur dans le menu en lui appliquant la classe choisi).

Améliorations de l'ergonomie avec HTML5

Puisque la navigation sur notre site se fait purement en Ajax, on a cassé certaines fonctionnalités de base du navigateur : en particulier, l'historique et les boutons « précédent/suivant » ne marchent plus, et chaque poème n'a pas d'URL attitrée. On peut utiliser des API introduites par HTML5 pour corriger ces problèmes.

  1. Faire en sorte que naviguer dans le menu des poèmes modifie la barre d'adresse et l'historique de l'internaute.
  2. Faire en sorte que le navigateur se souvienne du dernier poème visité lorsque l'internaute revient sur la page après l'avoir fermée.