Como carregar dados binários com WinJS.xhr (HTML)

Applies to Windows and Windows Phone

Você pode carregar e baixar dados binários ao usar WinJS.xhr (que encapsula XMLHttpRequest). Este exemplo mostra como carregar um bitmap de Imagens. O método do Tempo de Execução do Windows usado para abrir o arquivo de bitmap retorna IRandomAccessStream e, portanto, você deve usar MSApp.createBlobFromRandomAccessStream para convertê-lo em Blob.

Aviso  Agora você pode usar a XMLHttpRequest para carregar ou baixar objetos com alguns MB, como objetos Blob e FormData, o que pode levar muito tempo para concluir. Como os aplicativos podem ser encerrados a qualquer momento, considere a possibilidade de usar as APIs de transferência em segundo plano do Tempo de Execução do Windows para essas operações. Para obter mais informações sobre como carregar e baixar conteúdo, veja Como carregar um arquivo e Como baixar um arquivo. Para ver uma discussão geral sobre transferência em segundo plano, veja Transferring data in the background.

Pré-requisitos

Presumimos que você possa criar um aplicativo básico que utiliza a Biblioteca do Windows para JavaScript. Para obter ajuda na criação do seu primeiro aplicativo, veja Criar seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript.

Instruções

Etapa 1: Configurar seu aplicativo para acessar Imagens e a Web

Os aplicativos precisam adicionar determinadas funcionalidades explicitamente, como acessar uma determinada biblioteca no seu disco rígido ou acessar a rede. Para obter mais informações sobre funcionalidades, veja Declarações de funcionalidade do aplicativo e Como configurar funcionalidades da rede.

  1. No Visual Studio, crie um aplicativo em JavaScript em branco.

  2. Abra o arquivo package.appxmanifest e vá para a guia Recursos.

  3. Para a versão do Windows da amostra, a funcionalidade Internet (Cliente) já deverá estar selecionada, mas caso não esteja, selecione-a agora. O aplicativo talvez precise se conectar como um cliente a serviços Web em uma rede doméstica ou corporativa, então, a funcionalidade Redes Privadas (Cliente e Servidor) também é necessária.

    Para a versão do Windows Phone da amostra, selecione a funcionalidade Internet (Cliente e Servidor).

    Observação  No Windows Phone, há somente uma funcionalidade de rede (Internet (Cliente e Servidor) que habilita todo o acesso de rede para o aplicativo.

  4. Selecione o recurso Biblioteca de Imagens.

Etapa 2: Carregue o bitmap.

Há diversos métodos assíncronos que lidam com o acesso a arquivos. Esses métodos são tratados como qualquer outra promessa no JavaScript.

Observação  Para obter mais informações, consulte Programação assíncrona em JavaScript.

  1. Na seção BODY do arquivo default.html, adicione um elemento DIV que informa sobre o êxito ou falha do carregamento e dê a ele a ID "picDiv":

    
    <div id="picDiv"></div>
    
    
  2. No código, configure referências ao DIV e a Imagens:

    
    var picDiv = document.getElementById("picDiv");
    var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
    
    
    
  3. Localize o arquivo desejado em Imagens. Você poderia simplesmente carregar esse arquivo usando WinJS.xhr, mas digamos que você queira recodificar o arquivo ou fazer algum outro processamento nele. Na função completeFile da cláusula getFileAsync do método then, abra o arquivo usando openAsync. Em seguida, na função completeStream da cláusula openAsync do método then, faça o processamento que for necessário no fluxo do arquivo aberto, que é do tipo IRandomAccessStream.

    
    picturesLibrary.getFileAsync("myBitmap.bmp").then(
        function completeFile(file) {
            return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
            }).then(
                function completeStream(stream) {
                    // Do processing. 
        });
    
    
    
  4. Agora para o carregamento. O WinJS.xhr e a XMLHttpRequest não aceitam carregamentos do tipo IRandomAccessStream, portanto, é necessário converter o fluxo em um Blob. Existe uma função auxiliar MSApp.createBlobFromRandomAccessStream que faz exatamente isso. Você pode adicionar o Blob resultante à opção data do WinJS.xhr. O êxito ou falha do carregamento podem ser tratados na cláusula then do WinJS.xhr.

    
    picturesLibrary.getFileAsync("myBitmap.bmp").then(
        function completeFile(file) {
            return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
                var blob = MSApp.createBlobFromRandomAccessStream("image/bmp", stream);
                return WinJS.xhr({ type: "POST", url: <URI of the website>, data: blob });
            }).then(
                function (request) {
                    picDiv.textContent = "uploaded file";
                }, 
                function (error) {
                    picDiv.textContent = "error uploading file";
        });
    
    
  5. Execute o aplicativo. Você deverá conseguir carregar o arquivo.

Tópicos relacionados

Outros recursos
Declarações de funcionalidades do aplicativo
Conectando-se a serviços Web
Como configurar recursos de rede
Como baixar um arquivo com WinJS.xhr
Definindo os valores de tempo limite com WinJS.xhr ou HttpClient
Referência
WinJS.xhr
XMLHttpRequest
Aprimoramentos do XMLHttpRequest
Exemplos
Exemplo de integração de conteúdo e controles a partir dos serviços Web
Exemplo de autenticação da Web

 

 

Mostrar:
© 2014 Microsoft