Attention : Le contenu de ces pages n'a pas été mis à jour depuis longtemps. Il est probablement obsolète pour Firefox 4.0/Gecko 4.0 et supérieur. Pour du contenu plus récent, allez consulter developer.mozilla.org.

Xml http request

XMLHttpRequest est un objet JavaScript, à l'origine de chez Microsoft, puis importé par Mozilla. Il peut être utilisé facilement pour échanger des données via HTTP. Contrairement à ce que pourrait laisser penser son nom, on peut faire passer autre chose que du XML.

Exemple Simple

C'est très simple d'utiliser XMLHttpRequest. Vous créez une instance de l'objet, vous ouvrez une URL, puis vous envoyez la requête. Le code de statuts HTTP ainsi que le document retourné sont disponibles (via l'objet requête) au retour.

  req = new XMLHttpRequest();
  req.open('GET', '[[http://xulfr.org/']], false);
  req.send(null);
  if(req.status == 200)
    dump(req.responseText);

Notez que dans cet exemple, le transfert se fait en mode synchrone, aussi le script va bloquer l'interface client tant que la requête ne sera pas terminée. Dans la pratique il vaut mieux éviter cette technique :).

Pour plus de détails sur l'utilisation de XMLHttpRequest, voir les pages ApplisWeb/Request et ApplisWeb/MethodesRequetesHttp.

Référence

À completer.

Méthodes

Méthodes	Paramêtres	Description
abort	()	Abandonne la requête.
getAllResponseHeaders	()	Renvoie l'ensemble de l'entête de la réponse sous forme de chaîne de caractères.
getResponseHeader	("champEntete")	Renvoie la valeur d'un champ d'entête HTTP.
open	("method", "URL" [, asyncFlag [, "userName" [, "password"]]])	Prépare une requête en indiquant la méthode (PUT ,GET, ...), l'URL, le drapeau de synchronisation (true=requête asynchrone, false=requete synchrone), le nom d'utilisateur et le mot de passe.
send	(contenu)	Effectue la requête, éventuellement en envoyant les données.
setRequestHeader	("champ", "valeur")	Assigne une valeur à un champ d'entête HTTP qui sera envoyé lors de la requête.

Propriétés

Evénement	Description
status	indique le code retour de la requête (404, 200...)
statusText	message accompagnant le code de réponse. ;
responseText	réponse sous la forme d'une chaîne de caractères ;
responseXML	réponse sous la forme d'un document XML. ;
readyState	statut de l'objet.

Les code possibles pour le statut de l'objet sont :

0 = non initialisé ;
1 = ouverture. La méthode open() a été appelée avec succès ;
2 = envoyé. La méthode send() a été appelée avec succès ;
3 = en train de recevoir. Des données sont en train d'être transférées, mais le transfert n'est pas terminé ;
4 = terminé. Les données sont chargées. ;

Événements

Evénement	Description
onreadystatechange	Gestionnaire d'événements pour les changements d'état. Il faut assigner une fonction à cette propriété pour effectuer des traitements sur les données renvoyées après la requête.
onload	propriété contenant la référence à la fonction à executer une fois la réponse reçue

Faire une requête HEAD

Le support de HEAD pose problème pour le moment s'il se trouve que la requête amène à une redirection HTTP, la redirection suivie se fera en effectuant une requête GET, le bug sera corrigé dans Gecko 1.9 visiblement (https://bugzilla.mozilla.org/show_bug.cg(..).

Il existe cependant une possibilité de contourner, en utilisant nsIIOService , nsIChannel et nsIHttpChannel:

En premier lieu, on écrit une fonction pour créer notre objet nsIIOService .

  function IOService()
  {
    var service = Components.classes["@mozilla.org/network/io-service;1"]
                            .getService(Components.interfaces.nsIIOService);
    if(!service) return false;
    return service;
  }

Grâce à ce premier objet, on va pouvoir créer un objet nsIChannel . À la fonction qui aura ce rôle, on passera l'URL ciblée, et l'on délèguera le reste du travail à doHttp().

  function newChannel(url)
  {
    var serv = IOService();
    var uri = serv.newURI(url, null, null);
    if (serv && uri) {
      if(uri.scheme == "http") {
        doHttp(serv, uri);
        return true;
      }
    } else return false;
  }

Et, enfin la fonction doHttp() qui va se charger d'effectuer la requête, et de traiter le résultat. Il va falloir le faire, pour gérer les redirections (le cas qui fâche XMLHttpRequest ...). On lui passera nos deux éléments précédemment créés, à savoir notre objet nsIIOService (serv) et nsIChannel (uri).

La méthode asyncHttpListener permet de travailler de manière non-bloquante, de sorte que la requête ne bloque pas l'utilisation. Dès que les données arriveront, le code dans onStartRequest sera exécuté. L'exemple permet de jouer avec les redirections, détecter un code 200, et affiche une erreur dans le cas où l'on a pas une ressource utilisable. Votre code sera à placer dans la partie qui correspond à la réponse HTTP/1.1 200 ;). Notez que infos est un objet de type nsIHttpChannel .

  function doHttp(serv, uri)
  {
    var asyncHttpListener = {
      onStartRequest  : function(request, context) {
        var infos = context.QueryInterface(Components.interfaces.nsIHttpChannel);
        if(infos.responseStatus) {
          if(  infos.responseStatus == 301
            || infos.responseStatus == 302
            || infos.responseStatus == 307  ) {
            // redirection à suivre
            var _serv = IOService();
            var _uri  = serv.newURI(infos.getResponseHeader("Location"), null, null);
            doHttp(_serv, _uri);
            return true;
          } else if (infos.responseStatus == 200){
            // votre code à insérer en cas de réponse du serveur
          } else {
            var _dump = "HTTP/1.1 " + infos.responseStatus + " " + infos.responseStatusText;
            _dump = _dump + "\nDate: " + infos.getResponseHeader("Date");
            _dump = _dump + "\nServer: " + infos.getResponseHeader("Server");
            _dump = _dump + "\nConnection: " + infos.getResponseHeader("Connection");
            _dump = _dump + "\nContent-Type: " + infos.getResponseHeader("Content-Type");
            var _ref = infos.referrer;
            _dump = _dump + "\n\nReferrer: " + _ref;
            alert("Aucune redirection ou contenu valide, vérifiez l'URL.\n\n----\n" + _dump);
            return true;
          }
          return true;
        } else {
          alert("Critical Error, infos.responseStatus cannot be null.");
          return false;
        }
      },
      onStopRequest   : function(request, context, status) {
          return true;
      },
      onDataAvailable : function(request, context, inputStream, offset, count) {
          return true;
      }
    };

    var chan                  = serv.newChannelFromURI(uri);
    var httpChannel           = chan.QueryInterface(Components.interfaces.nsIHttpChannel);
    httpChannel.requestMethod = "HEAD";
    chan.asyncOpen(asyncHttpListener, httpChannel);
    return true;
  }

Autres Références

Le contenu de cette page est disponible selon certaines conditions de réutilisation.
Cette page du wiki n'est pas éditable. Le système wiki n'étant plus fonctionnel.