XHR et introduction à Ajax

Licence Informatique, semestre 6

Jean-Marc LecarpentierPascal Vanier

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.

Exercice 1 — Récupération de couleurs #

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, comme sur l'image suivante.
    Capture d'écran du résultat
    Exemple de rendu
    (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 #

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.