CSS
SVG

Улучшения объекта XMLHttpRequest

В Internet Explorer 10 и в приложения Магазина Windows на JavaScript добавлено несколько дополнительных возможностей объекта XMLHttpRequest, что обеспечивает расширенную поддержку новых стандартов и облегчает реализацию распространенных сценариев разработки. в том числе:

  • Скачивание и отправка двоичных файлов — например, изображений, видео и звуковых файлов — без использования подключаемых модулей.
  • Скачивание потоков мультимедиа без использования подключаемых модулей.
  • Расширенное представление о состоянии операций XMLHttpRequest.
  • Более эффективное взаимодействие с другими браузерами.

Эти изменения подробно описаны в следующих подразделах.

Скачивание и отправка двоичных объектов

В Internet Explorer 10 объект XMLHttpRequest расширен для поддержки двоичных данных. Для этого — помимо прочего — добавляется поддержка интерфейса больших двоичных объектов из спецификации API файлов.

Если свойство responseType объекта XMLHttpRequest имеет значение "blob", то данные, связанные с запросом, считаются двоичными. Это влияет на значение свойства ответа для запросов на скачивание (например, GET).

В следующем примере показано, как использовать объект XMLHttpRequest для скачивания изображения в большой двоичный объект, а затем присвоить результат элементу image на веб-странице.


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

Если свойство responseType для запросов на скачивание имеет значение "ms-stream", то содержимое можно обработать "на лету".


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

Поддержка потоковой передачи Comet

Internet Explorer 10 поддерживает многокомпонентную потоковую передачу по HTTP (также известную как потоковая передача Comet), разрешая считывать свойство responseText во время загрузки ответа на запрос XMLHttpRequest, как показано в следующем примере:


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

В предыдущих версиях Windows Internet Explorer свойство responseText было доступно для чтения только когда свойство readyState имело значение done.

Учтите, что свойство responseText возвращает полное значение ответа, считанного на данный момент. Чтобы обрабатывать отдельные пакеты по мере их получения, можно использовать событие progress (описанное в следующем подразделе) или отслеживать длину responseText при каждой обработке события readyStateChange, как показано в следующем примере:


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

Расширенная поддержка событий

В Internet Explorer 10 объект XMLHttpRequest расширен для поддержки следующих событий, определенных в спецификации XMLHttpRequest уровня 2:

СобытиеОписание

loadstart

Создается при запуске запроса.

progress

Создается с определяемым сервером интервалом, когда запрос отправляет или получает данные.

abort

Создается, когда запрос отменяется, например если вызывается метод abort().

error

Создается, если запрос завершается ошибкой.

load

Создается, когда запрос завершается успешно.

timeout

Создается после истечения заданного автором интервала времени.

loadend

Создается, когда запрос завершается (успешно или неуспешно).

 

Обработка событий для объекта XMLHttpRequest выполняется согласно моделям, указанным в спецификации событий модели DOM уровня 3 и спецификации событий хода выполнения, как показано в следующем примере.


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

Технология CORS для XMLHttpRequest

В Internet Explorer 10 добавлена поддержка технологии CORS для объекта XMLHttpRequest (XHR). Технология CORS определена в спецификации Cross-Origin Resource Sharing и использует заголовки HTTP для поддержки веб-запросов между доменами, которые обычно ограничиваются политикой, требующей размещения источника в том же домене.

По умолчанию эта политика запрещает веб-сайтам запрашивать ресурсы с серверов, находящихся в других доменах. Однако браузеры, поддерживающие технологию CORS для запросов XMLHttpRequest (XHR), могут получать доступ к ресурсам из других доменов, если такие запросы разрешены администратором.

Когда веб-страница создает запрос XHR, Internet Explorer отправляет заголовок источника на целевой сервер. Этот заголовок содержит схему протокола запроса (http:// или https://) и имя узла для веб-страницы, которая совершает запрос. Если целевой сервер утверждает запрос, то он возвращает заголовок Access-Control-Allow-Origin, и разрешается дальнейшая обработка запроса.

Теперь объекты XMLHttpRequest поддерживают свойство withCredentials, которое разрешает включать в запросы XHR механизмы авторизации. Дополнительные сведения см. в спецификации XMLHttpRequest уровня 2.

Свойство withCredentials позволяет обнаружить поддержку CORS, как показано в следующем примере.


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

XMLHTTPRequest (XHR) and AJAX Support

Примеры и учебники

О встроенном объекте XMLHTTP
AJAX — дополнительные возможности подключений в Windows Internet Explorer 8
Знакомство с AJAX-навигацией
Знакомство с междоменными запросами (XDR)
Дополнительные возможности объекта XMLHttpRequest в Windows Internet Explorer 8

Демонстрационные версии тестовых выпусков Internet Explorer

Отправка между сайтами

Записи блога IEBlog

Свойство responseXML объекта XMLHttpRequest в Internet Explorer 10 Release Preview
Технология CORS для XHR в Internet Explorer 10
Асинхронное программирование на JavaScript с использованием объектов Promise
Фильтрация ActiveX для разработчиков

Спецификация

XMLHttpRequest Level 2

 

 

Показ:
© 2015 Microsoft