Une question revient souvent sur les forums dédiés au JavaScript : Peut-on réaliser une requête sur le serveur sans (re)charger une page et sans utiliser d'astuces telles qu'une frame invisible ou une fenêtre popup ? Jusqu'à peu, je pensais que la réponse était aussi claire que négative. Et puis j'ai découvert XMLHTTPRequest et la réponse est devenue : « Oui ! » Mais les documentations sur ce sujet ne se bousculent pas sur le net, notamment en français. D'où cette petite introduction aux objets XMLHTTPRequest (que nous appellerons ainsi même si le nom diffère d'un navigateur à l'autre). Tout ce qui se trouve sur cette page fonctionne avec Internet Explorer 6+, Firefox 1.0+ et Opera 9+. Quant à Netscape, bah... si vous voulez tester, allez-y.

Avant d'entrer dans le vif du sujet, je tiens à remercier tous les habitués du forum de ToutJavaScript.com et notamment Aurélien pour son explication limpide sur les fonctions à retardement (j'espère les avoir bien utilisées) et poof65 pour sa collaboration lors de la création d'une classe d'abstraction des objets XMLHTTPRequest.

1. Présentation

Comme leur nom ne l'indique pas, les objets XMLHTTPRequest permettent de récupérer toutes sortes de données, et pas seulement des fichiers XML. Pour effectuer une requête, il faut tout d'abord déclarer une certaine variable. Ce qui se fait de manière différente avec IE et Firefox. Sous IE, on utilise un objet ActiveX et sous Firefox, on dispose d'un type ad hoc. Ensuite, on envoie la requête et enfin, on attend la réponse. Ci-après, vous pouvez voir un exemple très basique faisant une requête sur la présente page (location.href). Une fois la réponse obtenue, une boîte d'alerte s'affiche.

> Voir le code JavaScript

Comment ça marche ?

Note : Ces fonctions sont détaillées en section 6.

[haut de la page]

2. À quoi cela peut-il servir ?

Dans l'exemple précédent, la requête se contente de demander un certain fichier sans s'occuper du résultat. Mais en fait, lorsque la requête se termine, on reçoit (et heureusement) des informations du serveur. Ces informations sont contenues dans la variable xhr_object.responseText ou xhr_object.responseXML, selon que le résultat est au format texte (il est possible de mettre n'importe quoi dedans, tout est question d'interprétation ultérieure de ce résultat) ou XML. Remplaçons simplement l'alerte de l'exemple précédent par alert(xhr_object.responseText) (cf. ligne 14) et voyons le résultat :

Comme vous l'avez constaté, c'est tout le code de la présente page HTML qui s'est affiché (ça a d'ailleurs dû sortir de l'écran, désolé). En fait, lors d'une telle requête, tout se passe exactement comme si vous aviez tapé l'URL dans la barre d'adresse de votre navigateur. Ce qui signifie que si vous demandez un fichier PHP, il sera exécuté et c'est le résultat de son exécution qui se retrouvera dans xhr_object.responseText. À partir de là, on se rend vite compte qu'il n'y a pas de limite à l'utilisation de ce type de requête. On peut simplement afficher le résultat reçu avec un alert. On peut mettre le résultat dans un DIV (ou tout autre conteneur HTML), mais on peut tout aussi bien récupérer et exécuter du code JS grâce à eval.

Note : La section 5 présente un exemple concret d'utilisation.

[haut de la page]

3. Synchrone Vs. Asynchrone

Dans les exemples que nous avons vus jusqu'à maintenant, c'est le mode synchrone qui était utilisé. Cela signifie que tant que le résultat de la requête ne nous est pas parvenu, le script est en pause et le navigateur bloqué. Avec un bon débit et/ou peu de données à transmettre, on pourrait s'en contenter mais cela peut vite s'avérer gênant pour l'utilisateur qui voit son navigateur figé. Ce mode de transmission est donc à proscrire. Heureusement, il existe le mode asynchrone. Dans ce mode, après avoir envoyé la requête via send, le script poursuit son exécution, sans bloquer le navigateur. Évidemment, dans ce mode, il faut prévoir quelque chose pour nous prévenir quand la requête a abouti. C'est le rôle de la fonction onreadystatechange (en fait, onreadystatechange est une propriété et non une fonction, mais comme on lui affecte un pointeur vers une fonction nous pouvons nous permettre cet abus de langage). Prenons comme nouvel exemple une requête sur un simple fichier texte :

> Voir le code JavaScript
> Voir le contenu de foo.txt

Comment ça marche ?

C'est le troisième argument de la fonction open (cf. ligne 12) qui spécifie que le mode doit être asynchrone.

L'objet xhr_object possède une propriété readyState (cf. ligne 15) qui prend successivement 5 valeurs récapitulées dans le tableau suivant :

Et lors de chaque changement d'état de readyState, la fonction onreadystatechange (cf. ligne 14) est appelée. On peut ainsi lui faire faire ce que l'on veut en fonction de l'avancement de la requête. Mais de toute manière, c'est l'état 4 qui nous intéresse et il est généralement très rapidement atteint. Il existe une autre propriété intéressante qui est status et qui représente le code HTTP retourné par la requête. Il est bon de savoir que Firefox déclenche une erreur si on tente d'accéder à cette propriété avant que readyState ne vaille 4. Pour voir toutes les valeurs que peut prendre status, cliquez sur le lien suivant :

> Voir toutes les valeurs

[haut de la page]

4. Transmettre des données

Réaliser une requête et recevoir un résultat, c'est bien. Mais réaliser une requête en transmettant des données c'est mieux. Les données sont transmises de la même façon que lors de la soumission d'un formulaire, c'est-à-dire via l'une des deux méthodes get ou post. Évidemment, si on transmet des données, il faut que la requête porte sur un fichier capable de les interpréter correctement. Dans l'exemple suivant, nous allons envoyer deux chaînes de caractères au fichier strings2.php et celui-ci va nous les retourner « renversées ».

Entrez deux chaînes et choisissez une méthode de transmission
Chaîne 1 : ->
Chaîne 2 : ->
Méthode : get post
> Voir le code JavaScript
> Voir le contenu de strings2.php

Comment ça marche ?

Tout commence en JS. Si la méthode sélectionnée est get, les données à transmettre sont concaténées à l'URL (cf. lignes 21-24) et si la méthode est post, elles sont envoyées via la fonction send (cf. ligne 42). Dans ce dernier cas, on doit aussi préciser l'encodage en spécifiant l'en-tête adéquat avec setRequestHeader (cf. ligne 40).

Ensuite, côté PHP, les données sont reçues, quelle que soit la méthode de transmission et les chaînes sont renversées grâce à strrev (cf. lignes 3-12). Les données reçues via la méthode POST sont décodées grâce à utf8_decode sinon les caractères accentués sont mal interprétés. La chaîne affichée par le code PHP (et retournée, donc) est de la forme Données reçues en XXX:STRING1:STRING2:XXX vaut soit GET soit POST et où STRING1 et STRING2 sont les chaînes renversées. On précise aussi, grâce à la fonction header le type des données qui vont être transférées depuis le serveur (ici, du texte utilisant le jeu de caractères iso-8859-1) (cf. ligne 1).

Enfin, côté JS, il ne reste plus qu'à séparer les données, avec split et à mettre les chaînes dans les champs correspondants (cf. lignes 30-34).

[haut de la page]

5. Exemple concret d'utilisation

Comme nous l'avons vu dans les exemples précédents, nous disposons d'une grande liberté d'action avec cet outil. On peut simplement afficher le résultat de la requête dans une boîte d'alerte. On peut également l'afficher dans un div (ou tout autre élément HTML). Mais on peut tout aussi bien, si la chaîne récupérée représente du code JS, exécuter ce code grâce à eval.

Voici un exemple dans lequel une liste déroulante est peuplée en fonction du choix réalisé dans une première liste. Le code JS qui permet de remplir la seconde liste est généré côté serveur, suite à une requête MySQL et simplement évalué côté client.

Faites un choix dans la liste de gauche
et observez le résultat dans celle de droite
Famille :    Espèces :
> Voir le code JavaScript
> Voir le contenu de species.php
> Voir la table « Animals »

Comment ça marche ?

Dans cet exemple, seules les notions couvertes dans les sections 1. à 4. sont utilisées, ainsi que quelques notions élémentaires de JS et de PHP. Vous devriez donc logiquement pouvoir comprendre le code par vous-même. Si, si, j'en suis sûr.

[haut de la page]

6. Propriétés et méthodes

Cette section n'est pas exhaustive. Elle présente les propriétés et méthodes les plus utiles, même s'il est vrai que cette notion est assez subjective. Pour une liste complète, je vous invite à consulter la MSDN dont un lien est donné en section 7.

Propriétés

Méthodes

[haut de la page]

7. Quelques liens

Des exemples d'utilisation :

D'autres liens utiles :

[haut de la page]