WinJS.xhr을 사용하여 파일을 다운로드하는 방법(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

WinJS.xhr은 앱에서 웹 콘텐츠를 다운로드하는 편리한 방법을 제공합니다. 이 항목에서는 WinJS.xhr을 사용하여 파일을 다운로드하고, 오류를 처리하고, 다운로드 진행률을 보고하는 방법을 설명합니다. 또한 각 콘텐츠 형식을 다운로드하는 방법도 보여 줍니다.

WinJS.xhr 함수는 WinJS.Promise를 반환합니다. 일반적인 비동기 메서드 및 특히 JavaScript promise에 대한 자세한 내용은 JavaScript의 비동기 프로그래밍을 참조하세요.

경고 이제 XMLHttpRequest를 사용하여 Blob 개체 및 FormData 개체와 같이 완료하는 데 시간이 오래 걸릴 수 있는 매우 큰 개체를 전송할 수 있습니다. 앱은 언제든지 종료할 수 있으므로 이러한 작업에는 Windows 런타임 API의 파일 업로드 API를 사용해야 할 수 있습니다. 콘텐츠 업로드에 대한 자세한 내용은 파일을 업로드하는 방법을 참조하세요.

사전 요구 사항

이 절차를 완료하려면 JavaScript용 Windows 라이브러리 템플릿을 사용하는 기본 앱을 만들 수 있어야 합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 만들기를 참조하세요.

웹 액세스를 위해 앱 설정

앱은 네트워크 액세스와 같은 특정 접근 권한 값을 명시적으로 추가해야 합니다. 접근 권한 값에 대한 자세한 내용은 앱 접근 권한 값 선언 및 네트워크 접근 권한 값을 구성하는 방법을 참조하세요.

Visual Studio에서 빈 JavaScript 앱을 만듭니다.
package.appxmanifest 파일을 열고 접근 권한 값 탭으로 이동합니다.
Windows 버전 샘플의 경우 인터넷(클라이언트) 접근 권한 값이 선택되어 있습니다. 선택되어 있지 않으면 선택합니다. 앱이 홈 네트워크 또는 회사 네트워크의 웹 서비스에 클라이언트로 연결해야 할 경우 개인 네트워크(클라이언트 및 서버) 접근 권한 값이 필요합니다.

Windows Phone 버전 샘플의 경우 인터넷(클라이언트 및 서버) 접근 권한 값을 선택합니다.

참고 Windows Phone에는 앱에서 네트워크에 완전히 액세스하게 해 주는 단일 네트워크 접근 권한 값(인터넷(클라이언트 및 서버))이 있습니다.

기본 다운로드

이 단계에서는 웹 페이지를 다운로드하고, 다운로드가 완료되면 이를 보고합니다.

빈 앱을 만들고 이름을 XhrExample로 지정합니다.
완료된 알림, 진행률 및 오류 보고서를 포함할 수 있도록 default.html 파일의 HTML 본문에 DIV 요소를 추가합니다.
```
<div id="xhrReport"></div>
```
또한 default.html 파일의 HTML 본문에 WinJS.xhr 코드를 포함하는 SCRIPT 요소를 추가합니다.
```
var xhrDiv = document.getElementById("xhrReport");
xhrDiv.style.color = "#000000";

WinJS.xhr({ url: "https://www.microsoft.com" })
    .done(function complete(result) {
        // Report download.
        xhrDiv.innerText = "Downloaded the page";
        xhrDiv.style.backgroundColor = "#00FF00";
});
```
앞의 코드에서 complete 함수는 다운로드가 완료되었다는 메시지를 DIV 요소에 씁니다.

WinJS.xhr의 구문을 확인합니다. 이 함수는 옵션을 지정하는 단일 매개 변수를 사용합니다. 유일한 필수 옵션은 url입니다. 참조 설명서에서 다른 옵션에 대해 알아볼 수 있습니다.

각 promise에는 비동기 작업의 결과를 처리하는 데 사용할 수 있는 두 개의 함수 then과 done이 있습니다. 두 함수는 모두 세 개의 매개 변수를 사용합니다. 다운로드가 완료될 때(즉, readyState가 4임) 호출되는 함수, 오류가 있을 때 호출되는 함수 및 다운로드가 진행 중일 때(즉, readyState가 2 또는 3임) 호출되는 함수입니다. done 함수는 오류가 처리되지 않을 때 예외를 throw합니다. 오류 함수를 제공하지 않으려면 done 함수를 사용해야 합니다.
디버그 모드에서 앱을 빌드하고 실행합니다. "Downloaded the page" 단어가 포함된 녹색 상자가 나타나야 합니다.
이제 어떤 결과가 발생하는지 볼 수 있도록 오류를 발생시키겠습니다. 코드의 URL https://www.microsoft.com을 http://www.nosuchsite.example로 바꿉니다. 디버그 모드에서 앱을 실행하면 WinJS 파일 base.js의 terminateAppHandler 함수에 있는 debugger 문으로 이동합니다.

오류 처리

이 단계에서는 오류가 발생했다는 메시지를 DIV에 쓰는 오류 처리기를 추가합니다.

위의 3단계에서 추가한 코드에 오류 처리기를 추가합니다. WinJS.xhr을 사용할 경우 error 함수에 요청을 나타내는 매개 변수가 있습니다.

var xhrDiv = document.getElementById("xhrReport");

WinJS.xhr({ url: "http://www.nosuchsite.example" })
    .done(function complete(result) {
        // Report download.
        xhrDiv.innerText = "Downloaded the page";
        xhrDiv.style.backgroundColor = "#00FF00"; 
        },
        function error(result){
            xhrDiv.innerHTML = "Got error: " + result.statusText;
            xhrDiv.style.backgroundColor = "#FF0000";
     });

앱을 실행할 때 오류를 보고하는 빨간색 상자가 표시되어야 합니다.

진행률 보고

이 단계에서는 done 함수에 progress 함수를 제공하여 다운로드 진행률을 보고합니다.

이전 단계에서 추가한 코드에 진행률 처리기를 추가합니다. WinJS.xhr을 사용할 경우 progress 함수에 요청을 나타내는 매개 변수가 있습니다.

var xhrDiv = document.getElementById("xhrReport");

WinJS.xhr({ url: "https://www.microsoft.com" })
    .done(function complete(result) {
        // Report download.
            xhrDiv.innerText = "Downloaded the page";
            xhrDiv.style.backgroundColor = "#00FF00"; 
        },
        function error(error){
            xhrDiv.innerHTML = "Got error: " + error.statusText;
            xhrDiv.style.backgroundColor = "#FF0000";
        }, 
        function progress(result) {
            xhrDiv.innerText = "Ready state is " + result.readyState;
            xhrDiv.style.backgroundColor = "#0000FF";
    });

이 코드를 실행하면 단어 "Downloaded the page"가 포함된 녹색 상자가 나타나기 전에 단어 "Ready state is 2" 또는 "Ready state is 3"이 포함된 파란색 상자가 나타납니다. 파란색 상자를 보려면 progress 함수 내에 중단점을 설정하여 천천히 실행되도록 해야 합니다.

여러 콘텐츠 형식 다운로드

WinJS.xhr을 사용하면 여러 콘텐츠 형식을 다운로드할 수 있습니다. WinJS.xhr의 responseType 옵션에서 콘텐츠 형식을 지정합니다.

다음 형식이 지원됩니다.

arraybuffer: response의 형식이 ArrayBuffer입니다. 이 형식은 이진 콘텐츠를 Int8 또는 Int64 형식의 배열이나 다른 integer 또는 float 형식으로 나타내는 데 사용됩니다. 현재 JavaScript에서 지원되는 여러 형식화된 배열에 대한 자세한 내용은 형식화된 배열을 참조하세요. responseText 및 responseXML 속성은 undefined입니다.

다음 코드에서는 arraybuffer 응답을 처리하는 방법을 보여 줍니다.
```
<div id="xhrDiv"></div>
<script type="text/javascript">
    WinJS.xhr({ url: "https://www.microsoft.com", responseType: "arraybuffer" })
        .done(function complete(result) {
            var arrayResponse = result.response;
            var ints = new Uint32Array(arrayResponse.byteLength / 4);

            xhrDiv.style.backgroundColor = "#00FF00";
            xhrDiv.innerText = "Array is " + ints.length + "uints long";
        });
</script> 
```

blob: response의 형식이 Blob입니다. 이진 콘텐츠를 단일 이진 엔터티로 나타내는 데 사용됩니다. responseText 및 responseXML 속성은 undefined입니다.

다음 코드에서는 blob를 처리하는 방법을 보여 줍니다.

WinJS.xhr({ url: "https://www.microsoft.com/windows/Framework/images/win_logo.png", responseType: "blob" })
    .done(
        function (request) {
            var imageBlob = URL.createObjectURL(request.response);
            var imageTag = xhrDiv.appendChild(document.createElement("image"));
            imageTag.src = imageBlob;
        });

document: response 형식이 XML DOM(XML 문서 개체 모델) 개체입니다. XML 콘텐츠, 즉 MIME 형식이 "text/xml"인 콘텐츠를 나타내는 데 사용됩니다. MIME 형식이 "text/xml"이 아닌 경우 responseXML은 같은 형식이고 responseText는 undefined입니다.
json: response의 형식이 String입니다. JSON 문자열을 나타내는 데 사용됩니다. responseText는 String 형식이고 responseXML은 undefined입니다.
ms-stream: response 형식이 msStream이고 responseText 및 responseXML은 undefined입니다. 이 응답 형식은 W3C 사양에 정의되어 있지 않지만 스트리밍 데이터를 처리하기 쉽도록 지원됩니다. 자세한 내용은 XMLHttpRequest 고급 기능을 참조하세요.

text(기본값): response 형식과 responseText가 String입니다.

다음 예에서는 text 응답을 처리하는 방법을 보여 줍니다.

WinJS.xhr({ url: "http://www.msdn.microsoft.com/library", responseType: "text" 
    .done(
        function (request) {
            var text = request.responseText;
            var subText = text.substring(text.indexOf("Welcome"), text.indexOf("services.") + 9);
            xhrDiv.innerHTML = subText;
    });

요약

다음 항목에서 WinJS.xhr 및 XMLHttpRequest에 대한 자세한 정보를 확인할 수 있습니다.

다음을 통해 공유