WinJS.xhr을 사용하여 매시업을 만드는 방법(HTML)

아티클
12/11/2015

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

매시업이란 둘 이상의 소스에서 온 데이터를 사용해 새로운 것을 만드는 웹 응용 프로그램입니다. 이 예제에서는 XMLHttpRequest(XHR)를 사용하여 원격 RSS(Really Simple Syndication) 피드를 검색 및 표시하는 방법을 보여 줍니다.

알아야 할 사항

기술

WinJS.xhr

사전 요구 사항

사용자가 JavaScript용 Windows 라이브러리 템플릿을 사용하고 기본 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 런타임 앱 만들기를 참조하세요.

이 항목의 코드에서는 WinJS를 사용합니다. WinJS를 프로젝트에 포함하는 방법에 대한 자세한 내용은 빠른 시작: JavaScript용 Windows 라이브러리 컨트롤 및 스타일 추가를 참조하세요.

지침

단계 1: 웹 액세스를 위해 앱 설정

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

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

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

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

단계 2: RSS 피드 가져오기

WinJS.xhr 함수는 XHR을 사용해 지정된 URL에서 데이터를 검색합니다. WinJS.xhr은 비동기적이며 요청 데이터에 대해 Promise를 반환합니다. RSS 피드를 가져오려면 이 Promise에 대해 충족된 처리기를 지정합니다. 오류 처리기 및 진행률 처리기를 지정할 수도 있습니다.

패키지의 모든 페이지(로컬 컨텍스트의 페이지)에서 WinJS.xhr 함수를 호출할 수 있습니다.

참고 참고: XHR 요청의 대상 URL은 앱의 ApplicationContentUriRules(앱의 패키지 매니페스트에 나열됨)에 의해 제한되지 않습니다.

이 예에서는 WinJS.xhr을 사용하여 rss.msnbc.msn.com RSS 피드에 액세스합니다. 이 피드는 두 개의 콜백 함수를 Promise에 전달합니다.

xhrParseXml: 충족된 처리기. XHR 요청이 성공하면 이 함수가 호출됩니다.
xhrError: 오류 처리기. 요청이 성공하지 못하면 이 함수가 호출됩니다.

WinJS.xhr({ url: "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" }).then(
    xhrParseXml, xhrError
    );

다음 단계에서는 xhrParseXml 및 xhrError 메서드를 정의합니다.

단계 3: 결과 구문 분석

WinJS.xhr 요청이 성공하면 마지막 예의 코드는 xhrParseXml을 호출합니다. xhrParseXml 함수는 RSS 항목을 통해 반복되고 각각에 대한 링크를 생성합니다. 기본 페이지인 xhrOutput의 div에 링크가 표시됩니다.

function xhrParseXml(result) {

    var outputArea = document.getElementById("xhrOutput");
    var xml = result.responseXML;


    if (xml) {
        var items = xml.querySelectorAll("rss > channel > item");
        if (items) {
            var length = Math.min(10, items.length);
            for (var i = 0; i < length; i++) {
                var link = document.createElement("a");
                var newLine = document.createElement("br")
                link.setAttribute("href", items[i].querySelector("link").textContent);
                link.innerText = (i + 1) + ") " + items[i].querySelector("title").textContent;
                outputArea.appendChild(link);
                outputArea.appendChild(newLine);
            }
        } else {
            outputArea.innerHTML = "There are no items available at this time";
        }
    } else {
        outputArea.innerHTML = 
            "Unable to retrieve data at this time. Status code: " + statusCode;
    }
}

다음 예는 출력 영역에 대한 HTML 선언을 보여줍니다.

<div id="xhrOutput">
</div>

단계 4: 오류 처리

원격 데이터에 액세스하지 못할 가능성이 항상 있으므로, XHR 요청 처리를 위한 오류를 처리하는 방법을 제공해야 합니다. 이 예에서는 간단한 오류 처리기를 정의합니다.

자세한 내용은 네트워크 앱에서 예외 처리를 참조하세요.

function xhrError(result) {

    var statusCode = result.status; 
    var outputArea = document.getElementById("xhrOutput");
    outputArea.innerHTML = 
        "Unable to retrieve data at this time. Status code: " + statusCode;
}

전체 예제

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mashup</title>

    <!-- WinJS references - Windows -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- WinJS references - Phone -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- Mashup references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>

    <div id="xhrOutput">
    </div>
</body>
</html>

// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Initialize your application here.
            WinJS.UI.processAll();
            loadRemoteXhr();
        }
    };

    function loadRemoteXhr() {

        document.getElementById("xhrOutput").innerHTML = "";
        WinJS.xhr({ url: "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" }).then(
            xhrParseXml, xhrError
            );

    }

    function xhrParseXml(result) {

        var outputArea = document.getElementById("xhrOutput");
        var xml = result.responseXML;

        if (xml) {
            var items = xml.querySelectorAll("rss > channel > item");
            if (items) {
                var length = Math.min(10, items.length);
                for (var i = 0; i < length; i++) {
                    var link = document.createElement("a");
                    var newLine = document.createElement("br")
                    link.setAttribute("href", items[i].querySelector("link").textContent);
                    link.innerText = (i + 1) + ") " + items[i].querySelector("title").textContent;
                    outputArea.appendChild(link);
                    outputArea.appendChild(newLine);
                }
            } else {
                outputArea.innerHTML = "There are no items available at this time";
            }
        } else {
            outputArea.innerHTML = 
                "Unable to retrieve data at this time. Status code: " + statusCode;
        }
    }

    function xhrError(result) {

        var statusCode = result.status;
        var outputArea = document.getElementById("xhrOutput");
        outputArea.innerHTML = "Unable to retrieve data at this time. Status code: " + statusCode;
    }


    app.start();
})();

추가 기능이 포함된 다운로드 가능한 샘플은 웹 서비스의 콘텐츠 및 컨트롤 통합 샘플(영문)을 참조하세요.

다음을 통해 공유