AJAX : Les listes - select en HTML

Introduction

L'avènement du WEB 2.0 et l'utilisation d'AJAX semblent nous promettre des choses intéressantes. Rappelons que AJAX, pour Asynchronous Javascript and XML n'est pas à proprement parler un langage de programmation, mais une articulation particulière de divers langages :

• HTML (ou ses dérivés) pour la page
• CSS pour la présentation associée à la page
• Javascript pour la manipuler les zone dynamiques de la page
• XMLHttpRequest pour le dialogue navigateur - serveur HTTP
• le XML pour échanger des informations dans le dialogue navigateur - serveur, bien qu'on utilise souvent du texte brut

Dans les exemples que je présente, j'utilise XML et XSL pour fabriquer la page HTML. Contrairement à l'interface de crabs-ToDo, le CSS n'est pas utilisé dans mes exemples...

Présentation de l'exercice

L'objectif est d'associer le rafraichissement d'une liste (select en HTML) en fonction de la sélection faite dans une autre liste. C'est le serveur HTTP qui doit fournir le contenu de la seconde liste et ceux à chaque nouvelle sélection dans la première liste.

Ces associations de liste peuvent permettre une exploration hiérachisée dans une base de données : exemple pour une base de voiture, une marque donne les modèles, puis un modèle donne les différentes finitions, etc.

Vous pouvez voir la solution à ce problème sur cette page : AJAX : des listes associées.

Quelques explications

Regardons en détail le fichier index.xsl.

• ligne 22 : inclusion du fichier contenant le javascript
• ligne 25 : on appelle la fonction initialiser() après le chargement de la page
• ligne 34 : on arme le processus dynamique pour la première liste sur un évènement géré par le HTML
• ligne 38 : idem pour la seconde

Le fichier index.xml contient les données qui vont initialiser grace au XLST les deux listes :

• les pères (nom, valeur) sont présentés dans la première liste
• les fils (nom, valeur) sont dans la seconde liste

Le script les_fistons.php va fournir les éléments qui serviront à remplir la seconde liste en fonction de la sélection de la première liste :

• reçoit le numéro du père par GET
• envoit le nom des fils : nom du pere concaténé à fils et valeur du fils. Le nombre de fils dépend du numéro du père.

Le script httprequest.js contient toutes les fonctions Javascript qui permettent de faire ce dynamisme :

• ligne 1-27 : on obtient un objet XMLHttpRequest en fonction du navigateur utilisé
• ligne 30-36 : l'initialisation consiste à selectionner le premier élément pour les deux listes. Dans l'esprit WEB 2.0, on aurait aussi dû chager le contenu des 2 listes
• ligne 38-45 : on demande au serveur la liste des fils en fonction de la sélection détectée sur la première liste, pour cela on initalise une requète HTTP vers le serveur :
  • lignes 28 et 42 : l'url sera 'les_fistons.php?pere=' + le n° du père
  • ligne 28 : ce sera du 'GET' et de l'Asynchrone - valeur true du 3ème argument
  • ligne 43 : on arme la fonction Javascript qui va traiter la réponse : handleHttpResponse()
  • ligne 44 : la requète part effectivement vers le serveur
• ligne 47-59 : on traire la réponse, qui est correct si le readyState de l'objet XMLHttpRequest vaut 4.

Le reste du fichie c'est du Javascript classique avec le traitement de chaînes de caractères et la manipulation des objets qu'on recontre dans une page HTML en manipulation le "DOM".

Retrouver tous les sources dont il est question dans cet article dans le dossier AJAX : des listes associées.

Les ressources utiles

Voici les liens les plus utiles pour l'exploration d'AJAX :

• Document Object Model (DOM) et en particulier les Technical Reports
• L'objet XMLHttpRequest, traduction française du document de travail du W3C
• ECMAScript Language Specification ou le langage Javascript standardisé compatible avec la majorité des navigateurs