Ajax et E4X: Utiliser XML en JavaScript

Les pages web deviennent dynamiques avec l'ajout de code JavaScript. Plus encore quand on adopte Ajax, la technologie rapide de communication avec le serveur, qui est le centre d'intérêt principal des webmestres actuellement. Ajax permet de lire des documents XML sur le serveur pour compléter les pages. Classiquement, JavaScript accède aux balises et données du document avec les méthodes du DOM (modèle de l'objet document), mais le nouveau standard E4X facilite grandement l'accès au contenu XML.
E4X est une extension standard d'ECMAScript,  (ECMA-357) mais non implémenté par les navigateurs.

E4X a été implémenté dans Firefox puis supprimé à partir de la version 17. La raison en est probablement qu'il est plus facile d'utiliser JSON comme format de données. Il ne devrait donc pas être implémenté dans d'autres navigateurs, mais d'autres logiciels utilisant JS comme langage de script on implémenté ce standard (en tant qu'extension).

1) JavaScript

Pour créer des pages web dynamiques ou des applications web légères, on utilise JavaScript.
C'est un langage de scripts interprété par le navigateur web qui ajoute de l'interaction aux pages web. Les variables sont dynamiques et le langage est assez complet, avec l'inconvénient pour le programmeur que les erreurs sont simplement ignorées, aucun message pour le prévenir.
Un petit exemple de code:

<script language ="JavaScript">
   var demo = "demo";
   function disphello(str) 
   {  
      document.write("hello " + str);   
   } 
   dispstring("moi"); 
</script>
On associe le code aux éléments HTML avec des attributs comme "onclick" (quand on clique sur l'élément HTML avec la souris), auxquels on assigne le nom d'une fonction JavaScript.
Cette page vous permet de consulter une description plus détaillée de JavaScript.

2) DOM

Cela signifie "Document Object Model", et c'est un ensemble de méthodes qui permettent d'accéder au contenu d'un document XML.
L'interface de DOM permet de traiter les documents XML ou HTML.
Exemple:

var baliseLien = document.getElementsByTagName("a") ; 
for (var i = 0; i < baliseLien.length; i++)
{ 
   var element =  baliseLien.item(i);
   alert("Href de cet élément est : " + element.getAttribute(href) + "\n"); 
}

Le code en gras concerne DOM, ses méthodes et attributs, le reste étant du JavaScript. Ainsi, la variable baliseLien est un objet de type DOMNodeList avec un attribut length et une méthode unique item() qui retourne un objet DOMNode.
On assigne à une variable un élément pris dans un document HTML et on utilise les attributs de cet élément.
Comme on peut le voir, on accède au contenu par le nom de balise (getElementByTagName), ou par son identifieur (getElementByTagId), ce qui suppose une connaissance préalable de la structure du document.

L'interface du modèle document objet se subdivise en une quantité de classes: DOMDocument, DOMElement, DOMNodeList, DOMNode etc. Même si ces classes ne sont utilisées explicitement en JavaScript qui n'a pas de type, les méthodes sont associées aux types des classes, il faut donc les connaître pour utiliser DOM, on ne peut que rêver d'un modèle plus simple avec une seule classe XML pour représenter tout élément de structure du document.

D'autant plus que la généralisation d'Ajax pour communiquer avec le serveur grâce à l'objet XMLHttpRequest, facilite grandement l'utilisation de XML comme support de données sur le web.

3) XMLHttpRequest

Ajax est la combinaison de JavaScript et d'une classe, XMLHttpRequest, reconnue par tous les navigateurs, qui communique avec le serveur de façon asynchrone. Ce qui veut dire, qu'elle peut recueillir des données et mettre à jour la page web sans avoir besoin de la recharger. Elle est donc modifiée de façon instantanée.
Le classe reconnait aussi le format texte pur, mais elle offre toute sa puissance avec le chargement de document XML, dont le contenu sera ensuite accessible par le DOM. Pour remplacer les méthodes de DOM, pour le traitement du document XML chargé, un nouveau standard a été créé: E4X.

4) E4X

Le nom E4X est un jeu de mot, c'est l'acronyme de "ECMAScript For XML", et for se prononce four, qui signifie 4 en anglais.
L'ECMA qui a standardisé JavaScript sous le nom d'ECMAScript, a défini une extension pour l'utilisation de documents XML. Son but est de remplacer l'interface DOM classique, par quelque chose de plus simple.
Il y a des ressemblances entre E4X et la classe SimpleXML de PHP 5. Cette dernière à été implémentée également pour remplacer les classes de DOM classiques, assez lourdes à manipuler.

Cette définition est loin d'être parfaite, notamment parce qu'elle s'inspire de PHP et l'on sait que PHP traîne depuis l'origine un défaut dans les tableaux qui confondent numéro d'index et clé de recherche. Précisément, le standard utilise un format assez compliqué pour différencier les clés (les noms d'attributs) des numéros de position des éléments sur un niveau XML, qui n'est pas utile en dehors du langage PHP.

Cependant, la déclaration d'un objet XML devient simple avec E4X, il se déclare comme un objet Date:

var d = new Date();
var x = new XML();

E4X permet aussi d'intégrer facilement un document XML dans un script (cela s'apparenterait plutôt au langage Scriptol):

var monxml = <voiture>
  <passager age="25">
      Alice
  </passagers>
  <passager age="28">
      Kevin
  </passager>
</voiture>

Un objet DOM peut être assigné à un objet E4X, selon la syntaxe suivante:

var x = document.getElementById("demo");
var demo = new XML(x);

Accéder au contenu du document devient très simple:

monxml.passager[0]

retourne Alice.

monxml.passager[1].@age

retourne 28, c'est un attribut du second élément passager. La balise conteneur est implicite.

Tester E4X

Tester E4X avec votre navigateur: le message "Gotcha" doit apparaître. Seul Firefox reconnaît E4X jusqu'à la version 20. Il est abandonné ensuite. Mais JavaScript est aussi utilisé par XUL et autres langages basés sur XML.

Tester

Le script est dans la section head de la page:

function testE4X()
{
  var x = new XML("<doc><voiture message='Gotcha'>Aston-Martin</voiture></doc>");
  alert(x.voiture[0].@message); 
}

Ressources

Quelques sites d'informations et de ressources sur les langages et technologies précédemment évoquées.