Aprimoramentos do XMLHttpRequest

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript apresentam diversas melhorias no objeto XMLHttpRequest para maior compatibilidade com os padrões emergentes e os cenários de desenvolvimento comuns. Isso inclui:

  • Baixar e carregar arquivos binários, como imagens, vídeo e áudio sem o uso de plug-ins.
  • Baixar streaming de conteúdo multimídia sem o uso de plug-ins.
  • Melhores informações sobre o status das operações XMLHttpRequest.
  • Melhor interoperabilidade com outros navegadores.

Essas mudanças estão descritas em mais detalhes nas seções a seguir.

Carregamento e download de objetos binários

O Internet Explorer 10 amplia XMLHttpRequest para dar suporte para dados binários. Isso é feito, em parte, com a adição do suporte para a interface Blob da especificação da API de Arquivo.

Quando a propriedade responseType de um objeto XMLHttpRequest é definida como "blob", os dados associados à solicitação são tradados como binários. Isso afeta o valor da propriedade de resposta para solicitações de download (por exemplo, GET).

O exemplo a seguir mostra como usar XMLHttpRequest para baixar uma imagem para um objeto blob e, depois, atribuir o resultado a um elemento de imagem na página da 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();

Quando a propriedade responseType é definida como "ms-stream" para solicitações de download, o conteúdo pode ser manipulado de maneira imediata, conforme mostra o exemplo a seguir.


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

Suporte para streaming de Comet

O Internet Explorer 10 dá suporte para o streaming de HTTP de partes múltiplas (também conhecido como streaming de Comet) permitindo que a propriedade responseText seja lida enquanto a resposta a uma solicitação XMLHttpRequest é carregada, conforme mostra o exemplo a seguir:


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

Em versões anteriores do Windows Internet Explorer, a propriedade responseText pode ser lida somente quando a propriedade readyState está definida como concluída.

A propriedade responseText retorna o valor completo da resposta lida até então. Se você deseja manipular pacotes individuais da resposta à medida que forem recebidos, pode usar o evento progress (descrito na próxima seção) ou rastrear a duração de responseText em cada iteração do evento readyStateChange, conforme mostra o exemplo a seguir:


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

Suporte aprimorado para eventos

O Internet Explorer 10 amplia o objeto XMLHttpRequest para dar suporte para os eventos a seguir definidos na especificação XMLHttpRequest Nível 2:

EventoDescrição

loadstart

Dispara quando a solicitação é iniciada.

progress

Dispara em intervalos definidos pelo servidor enquanto a solicitação está enviando ou recebendo dados.

abort

Dispara quando a solicitação é cancelada, por exemplo, quando o método abort() é chamado.

error

Dispara quando a solicitação falha.

load

Dispara quando a solicitação é concluída com êxito.

timeout

Dispara quando um período de tempo especificado pelo autor é transcorrido.

loadend

Dispara quando a solicitação é concluída com ou sem êxito.

 

A manipulação de eventos do objeto XMLHttpRequest segue os modelos definidos na especificação Eventos DOM Nível 3 e na especificação Eventos de Progresso, conforme mostra o exemplo a seguir.


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 (Cross-Origin Resource Sharing) para XMLHttpRequest

O Internet Explorer 10 adiciona suporte para CORS no que diz respeito ao objeto XMLHttpRequest (XHR). Definido na especificação Cross-Origin Resource Sharing, o CORS usa cabeçalhos HTTP para habilitar solicitações da Web de domínios cruzados que geralmente são proibidas pela política de origem no mesmo site.

Por padrão, a política de mesmo site de origem impede que sites solicitem recursos de servidores em outros domínios. No entanto, navegadores que dão suporte para solicitações CORS para XMLHttpRequest (XHR) podem acessar recursos de outros domínios se o administrador responsável optar por permitir essas solicitações.

Quando uma página da Web realiza uma solicitação XHR, o Internet Explorer envia um cabeçalho de origem para o servidor de destino. Esse cabeçalho contém o esquema de protocolo da solicitação (http:// ou https://) e o nome de host da página da Web que está realizando a solicitação. Se o servidor de destino aprovar a solicitação, ele retornará um cabeçalho Access-Control-Allow-Origin e a solicitação poderá continuar.

Objetos XMLHttpRequest agora dão suporte para uma propriedade withCredentials, que permite que solicitações XHR incluam mecanismos de autorização. Para saber mais, veja a especificação XMLHttpRequest Nível 2 .

A propriedade withCredentials pode ser usada para detectar o suporte para CORS, como mostra o exemplo a seguir.


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
}

Referência de API

XMLHTTPRequest (XHR) and AJAX Support

Amostras e tutoriais

Sobre o XMLHTTP nativo
AJAX - Melhorias de conectividade no Windows Internet Explorer 8
Introdução a navegações AJAX
Introdução à XDR (solicitação entre domínios)
Melhorias do XMLHttpRequest no Windows Internet Explorer 8

Demonstrações do Test Drive do Internet Explorer

Carregamento entre sites

Postagens no blog do IE

XMLHttpRequest responseXML no IE10 Release Preview
CORS para XHR no IE10
Programação assíncrona em JavaScript com "promessas"
Filtragem ActiveX para desenvolvedores

Especificação

XMLHttpRequest - Nível 2

 

 

Mostrar:
© 2015 Microsoft