XMLHttpRequest et accessibilité

Avant propos

Ce texte est un essai de rendre l'utilisation de XMLHttpRequest accessible. Il s'agit d'ajouter XMLHttpRequest à une code déjà accessible.

Description du code

Le module cible se compose de deux pages XHTML. La première page contient une liste d'items (UL/LI). Chaque item possède un identifiant unique (id). Lorsque le visiteur clique sur un lien, la deuxième page est appellée pour mettre à jour l'item et l'enlever de la liste. Exemple: l'item a été payé, je clique, et l'item disparaît de la liste. Ensuite, il existe un lien sur la deuxième page qui revient vers la première page. Il pourrait s'agir d'une redirection automatique vers la première page.

Mon idée est donc d'utiliser l'objet XMLHttpRequest pour enlever le rafraîchissement de la page si l'utilisateur possède javascript. La ligne devra aussi être enlevée.

Voici une ligne simplifiée d'un item:

 <li><a href="page2.php?id=772&amp;progress=100">Item A</a></li>

Après l'ajout du code XMLHttpRequest, la ligne deviendra ceci:

 <li><a href="page2.php?id=772&amp;progress=100" 
     onclick="completeTask(this);return false;">Item A</a></li>

Code javascript

Dans un fichier javascript, j'insère ma déclaration du code javascript pour créer un objet XMLHttpRequest (fichier xmlhttprequest.js). La méthode assigne une fonction de retour, qui dans mon cas est vide puisque je ne veut pas détecter les retours à ce stade. La fonction completeTask() possède l'argument ahref qui représente une référence vers ma balise a.

<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript">
/**
 * Permet de compléter une tâche de façon asynchrome, transparente et accessible.
 * @param ahref Balise A qui contient l'URL.
 */
function completeTask(ahref) {
  // Création de l'objet : je n'assigne pas de fonction de retour à l'objet d'où le null
  var xmlhttp = getHTTPObject(null); 
  // Préparation d'une requête asynchrone de type GET :
  xmlhttp.open("GET", ahref.href, true); 
  // Effectue la requête :
  xmlhttp.send(null); 

  // suppression de la ligne qui contient le lien
  // ahref.parentNode = Balise li
  // ahref.parentNode.parentNode = Balise ul
  ahref.parentNode.parentNode.removeChild(ahref.parentNode);
}
</script>

Conclusion

Le tout fonctionne merveilleusement bien. Il n'y a pu de rafraîchissement, le code fonctionne quand même sans javascript et tout le monde est content. Il s'agit donc d'améliorer ou d'accélérer le fonctionnement déjà présent et de reproduire le comportement de PHP à l'aide de javascript puisqu'il n'y a pas de rechargement de la page.