Exporter (0) Imprimer
Développer tout

Améliorations de XMLHttpRequest

Internet Explorer 10 et les applications du Windows Store en JavaScript introduisent plusieurs améliorations de l’objet XMLHttpRequest en vue de fournir une meilleure prise en charge des normes émergentes et de simplifier la prise en charge des scénarios de développement courants, notamment :

  • Téléchargement de fichiers binaires, tels que des images et des fichiers vidéo et audio, sans utiliser de plug-in.
  • Flux de téléchargement de contenu multimédia sans utiliser de plug-ins.
  • Meilleure compréhension de l’état des opérations XMLHttpRequest.
  • Interopérabilité accrue avec d’autres navigateurs.

Ces modifications sont décrites plus en détail dans les sections suivantes.

Téléchargement d’objets binaires

Internet Explorer 10 étend XMLHttpRequest pour prendre en charge les données binaires. Cela est rendu possible en partie par la prise en charge de l’interface blob de la spécification relative à l’API de fichier « File API ».

Lorsque la propriété responseType d’un objet XMLHttpRequest est définie sur « blob », les données associées à la demande sont traitées en tant que données binaires. Cela influe sur la valeur de la propriété de réponse pour les demandes de téléchargement (par exemple, GET).

L’exemple suivant montre comment utiliser XMLHttpRequest pour télécharger une image dans un objet Blob, puis affecter le résultat à un élément image sur la page Web.


var req = new XMLHttpReqest();
xhr.open("GET", "download?name=" + name, true);
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
  if (xhr.readyState == xhr.DONE) {
    var blob = xhr.reponse;
    var image = document.getElementById("my-image");
    image.addEventListener("load", function (evt) {
      URL.revokeObjectURL(evt.target.src);
    }
    image.src = URL.createObjectURL(blob);
  }
}
xhr.send();

Lorsque la propriété responseType est définie sur "ms-stream" pour les demandes de téléchargement, le contenu peut être traité à la volée, comme le montre l’exemple suivant.


var xhr = new XMLHttpReqest();
xhr.open("GET", "download?name=" + name, true);
xhr.responseType = "ms-stream";
xhr.onreadystatechange = function () {
  if (xhr.readyState == xhr.LOADING) {
    var stream = xhr.reponse;
    var video = document.getElementById("my-video");
    video.addEventListener("loadeddata", function (evt) {
      URL.revokeObjectURL(evt.target.src);
    }
    video.src = URL.createObjectURL(stream);
  }
}
xhr.send();

Prise en charge du flux Comet

Internet Explorer 10 prend en charge le flux HTTP de type multipart (également appelé flux Comet) en autorisant la lecture de la propriété responseText pendant le chargement de la réponse à une demande XMLHttpRequest, comme le montre l’exemple suivant :


xhr.open("GET", url);
xhr.timeout = timeout;
xhr.onreadystatechange = function() {
  if (this.readyState >= 3 && this.status == 200) {
    var content = this.responseText;
    handleContent(content);
  }
}
xhr.send();

Dans les versions antérieures de Windows Internet Explorer, la propriété responseText peut uniquement être lue lorsque la propriété readyState est définie comme étant terminée « done ».

Notez que la propriété responseText retourne la valeur entière de la réponse actuellement lue. Si vous souhaitez traiter individuellement les paquets de la réponse au fur et à mesure qu’ils sont reçus, utilisez l’événement progress (décrit dans la section suivante) ou enregistrez la longueur de responseText dans chaque itération de l’événement readyStateChange, comme le montre l’exemple suivant :


xhr.open("GET", url);
xhr.timeout = timeout;
xhr.onreadystatechange = function() {
  if (typeof this.index == "undefined")
    this.index = 0;
    
  if (this.readyState >= 3 && this.status == 200) {
    var content = this.responseText;
    handleContent( content.substring(this.index) )
    this.index = content.length;
  }
}
xhr.send();

Prise en charge avancée des événements

Internet Explorer 10 étend l’objet XMLHttpRequest pour prendre en charge les événements suivants indiqués dans la spécification « XMLHttpRequest Level 2 »:

ÉvénementDescription

loadstart

Se déclenche lorsque la demande démarre.

progress

Se déclenche à des intervalles définis par le serveur pendant que la demande envoie ou reçoit des données.

abort

Se déclenche lorsque la demande est annulée, par exemple, lorsque la méthode abort() est appelée.

error

Se déclenche lorsque la demande échoue.

load

Se déclenche lorsque la demande réussit.

timeout

Se déclenche lorsque la période définie par l’auteur s’est écoulée

loadend

Se déclenche lorsque la demande est réalisée, avec succès ou non.

 

Le traitement des événements pour l’objet XMLHttpRequest suit les modèles indiqués dans la spécification « DOM Events Level 3 » et la spécification « Progress Events », comme le montre l’exemple suivant.


var xhr = new XMLHttpRequest();
var url = "some-url";

xhr.timeout = 5000;
xhr.addEventListener("timeout", handleTimeout(evt), false);

xhr.onprogress = function(evt) {
  handleEvent("data: " + this.responseText);
  // Calculate progress 
  var str = "";
  if (evt.lengthComputable) {
    var percent = 100 * evt.loaded / evt.total;
    str = percent + "%. Current total size: " + this.responseText.length);
  } else {
    str = "Progress unknown. Current total size: " + this.responseText.length;
  }
  updateProgress(str);
}
xhr.open("GET", url);
xhr.send();

Prise en charge de la technologie CORS (Cross-Origin Resource Sharing) pour XMLHttpRequest

Internet Explorer 10 prend en charge la technologie CORS (Cross-Origin Resource Sharing) pour l’objet XMLHttpRequest (XHR). Définie dans la spécification Cross-Origin Resource Sharing, la technologie CORS utilise les en-têtes HTTP pour activer les demandes Web inter-domaines qui sont normalement restreintes par la stratégie « same-site origin ».

Par défaut, la stratégie « same-site origin » empêche les sites Web de demander des ressources à des serveurs d’autres domaines. Cependant, les navigateurs qui prennent en charge la technologie CORS pour les demandes XMLHttpRequest (XHR) peuvent accéder aux ressources d’autres domaines si l’administrateur approprié choisit d’autoriser de telles demandes.

Lorsqu’une page Web fait une demande XHR, Internet Explorer envoie un en-tête d’origine au serveur cible ; l’en-tête contient le schéma de protocole de la demande (http:// ou https://) et le nom d’hôte de la page à l’origine de la demande. Si le serveur cible approuve la demande, il retourne un en-tête Access-Control-Allow-Origin et la demande est autorisée à se poursuivre.

Les objets XMLHttpRequest prennent désormais en charge une propriété withCredentials, qui permet aux demandes XHR d’inclure des mécanismes d’autorisation. Pour plus d’informations, voir la spécification XMLHttpRequest Level 2.

La propriété withCredentials peut être utilisée pour détecter la prise en charge de la technologie CORS, comme le montre l’exemple suivant.


var url = "http://contoso.com/services/"
if( window.XMLHttpRequest ) {
  var oReq = new XMLHttpRequest();
  if( oReq.withCredentials == true ) {
    oReq.open("GET", url, true);
    oReq.onload = handleResponse();
    oReq.send( null );
  } else {
  // CORS not support.  Handle fallback
  }
} else { 
  // XMLHttpRequest not supported; handle fallback
}

Informations de référence sur les API

XMLHTTPRequest (XHR) and AJAX Support

Exemples et didacticiels

À propos de XMLHTTP natif
AJAX - Améliorations de la connectivité dans Windows Internet Explorer 8
Présentation des navigations AJAX
Présentation des demandes entre domaines (XDR)
Améliorations de XMLHttpRequest dans Windows Internet Explorer 8

Démonstrations du site Internet Explorer Test Drive

Cross-Site Upload

Billets IEBlog

XMLHttpRequest responseXML dans IE10 Release Preview
CORS pour XHR dans IE10
Programmation asynchrone en JavaScript avec « Promises »
Filtrage ActiveX pour les développeurs

Spécification

XMLHttpRequest Level 2

 

 

Afficher:
© 2014 Microsoft