XMLHttpRequest-Erweiterungen

Internet Explorer 10 und Windows Store-Apps mit JavaScript bieten mehrere Erweiterungen für das XMLHttpRequest-Objekt und besseren Support für die neuen Standards und gängige Entwicklerszenarios. Dazu gehören u. a.:

  • Herunterladen und Hochladen von Binärdateien wie Bilder, Videos und Audio ohne die Verwendung von Plug-ins.
  • Herunterladen vom Multimedia-Content-Streams ohne Verwendung von Plug-ins.
  • Verbesserte Einblicke in den Status von XMLHttpRequest-Vorgängen.
  • Verbesserte Interoperabilität mit anderen Browsern.

Diese Änderungen werden in den folgenden Abschnitten ausführlicher beschrieben:

Hochladen und Herunterladen von Binärobjekten

Internet Explorer 10 erweitert XMLHttpRequest um die Unterstützung von Binärdateien. Dies wird teilweise durch Hinzufügen der Unterstützung für die Blob-Schnittstelle der Datei-API-Spezifikation erreicht.

Wenn die responseType-Eigenschaft eines XMLHttpRequest-Objekts auf "blob" festgelegt wird, werden die mit dieser Anforderung verbundenen Daten wie binäre Daten behandelt. Dies wirkt sich auf den Wert der Antworteigenschaft für Downloadanforderungen (z. B. GET) aus.

Das folgende Beispiel veranschaulicht die Verwendung von XMLHttpRequest für das Herunterladen eines Bildes in ein blob-Objekt. Das Ergebnis wird anschließend einem image-Element auf der Webseite zugeordnet.


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();

Wenn Sie die responseType-Eigenschaft für Downloadanforderungen auf "ms-stream" festlegen, können Inhalte dynamisch bearbeitet werden, wie im folgenden Beispiel veranschaulicht.


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();

Unterstützung für Comet-Streaming

Internet Explorer 10 unterstützt mehrteilige HTTP-Streams (auch als Comet-Streaming bezeichnet). Dazu kann die responseText-Eigenschaft gelesen werden, während die Antwort an eine XMLHttpRequest-Anforderung geladen wird, wie im folgenden Beispiel veranschaulicht:


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();

In früheren Versionen von Windows Internet Explorer kann die responseText-Eigenschaft nur gelesen werden, wenn die readyState-Eigenschaft als abgeschlossen festgelegt wurde.

Beachten Sie, dass die responseText-Eigenschaft den vollständigen Wert der bisher gelesenen Antwort zurückgibt. Um einzelne Pakete der Antwort beim Empfang zu verarbeiten, können Sie das progress-Ereignis (im nächsten Abschnitt beschrieben) verwenden oder die Länge des responseText in jeder Iteration des readyStateChange-Ereignisses überwachen, wie im folgenden Beispiel veranschaulicht:


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();

Verbesserter Ereignissupport

Internet Explorer 10 erweitert das XMLHttpRequest-Objekt um die Unterstützung der folgenden Ereignisse, die in der XMLHttpRequest-Spezifikation der Ebene 2 angegeben werden:

EreignisBeschreibung

loadstart

Das Ereignis wird ausgelöst, wenn die Anforderung gestartet wird.

progress

Das Ereignis wird periodisch beim Senden oder Empfangen von Daten durch die Anforderung ausgelöst; das entsprechende Intervall wird vom Server bestimmt.

abort

Das Ereignis wird ausgelöst, wenn die Anforderung abgebrochen wird, beispielsweise wenn die abort()-Methode aufgerufen wird.

error

Das Ereignis wird ausgelöst, wenn ein Fehler bei der Anforderung auftritt.

load

Das Ereignis wird ausgelöst, wenn die Anforderung erfolgreich abgeschlossen wird.

timeout

Das Ereignis wird ausgelöst, wenn ein vom Autor angegebener Zeitraum verstrichen ist.

loadend

Das Ereignis wird ausgelöst, wenn die Anforderung erfolgreich oder nicht erfolgreich abgeschlossen wird.

 

Ereignisse für das XMLHttpRequest-Objekt werden gemäß den Modellen in der Spezifikation Ereignisse der DOM-Ebene 3 und in der Spezifikation für Statusereignisse behandelt, wie im folgenden Beispiel veranschaulicht.


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();

Cross-Origin Resource Sharing (CORS) für XMLHttpRequest

Internet Explorer 10 unterstützt Cross-Origin Resource Sharing (Ursprungsübergreifendes gemeinsames Nutzen von Ressourcen, CORS) für das XMLHttpRequest (XHR)-Objekt. CORS wird in der Spezifikation Cross-Origin Resource Sharing definiert und ermöglicht es durch den Einsatz von HTTP-Headern, Webanforderungen auch über Domänengrenzen hinweg auszuführen.

Normalerweise können Websites aufgrund der Richtlinie zur Herkunft von Daten von derselben Site keine Ressourcen von Servern in anderen Domänen anfordern. Browser, die XHR-Anforderungen (CORS für XMLHttpRequest) unterstützen, können jedoch auf Ressourcen in anderen Domänen zugreifen, wenn dies vom zuständigen Administrator erlaubt wird.

Bei einer XHR-Anforderung durch eine Webseite sendet Internet Explorer einen Ursprungsheader an den Zielserver. Der Header enthält das Protokollschema der Anforderung (http:// oder https://) sowie den Hostnamen der Webseite, von der die Anforderung stammt. Wenn die Anforderung vom Zielserver zugelassen wird, wird ein Access-Control-Allow-Origin-Header zurückgegeben, und die Anforderung kann verarbeitet werden.

XMLHttpRequest-Objekte unterstützen nun eine withCredentials-Eigenschaft, mit der Autorisierungsmechanismen in XHR-Anforderungen verwendet werden können. Weitere Informationen finden Sie in der Spezifikation XMLHttpRequest, Ebene 2.

Mit der withCredentials-Eigenschaft können Sie die CORS-Unterstützung abfragen, wie im folgenden Beispiel veranschaulicht.


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
}

API-Referenz

XMLHTTPRequest (XHR) and AJAX Support

Beispiele und Lernprogramme

Info zu systemeigenem XMLHTTP
AJAX – Konnektivitätsverbesserungen in Windows Internet Explorer 8
Einführung in AJAX-Navigationen
Einführen in domänenübergreifende Anforderungen (XDR)
XMLHttpRequest-Verbesserungen in Windows Internet Explorer 8

Demos für die Internet Explorer-Testversion

Cross-Site Upload

IEBlog-Beiträge

"XMLHttpRequest responseXML" in IE10 Release Preview
CORS für XHR in IE10
Asynchrone Programmierung in JavaScript mit Zusagen
ActiveX-Filterung für Entwickler

Spezifikation

XMLHttpRequest Stufe 2

 

 

Anzeigen:
© 2014 Microsoft