如何使用 WinJS.xhr 建立交互式 Web 應用程式 (Mashup) (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

交互式 Web 應用程式 (Mashup) 是使用兩個以上的來源所建立的新 Web 應用程式。這個範例會示範如何使用 XMLHttpRequest (XHR) 來擷取和顯示遠端的真正簡易新聞訂閱方式 (RSS) 摘要。

您必須知道的事

技術

WinJS.xhr

先決條件

我們假設您能夠以適用於 JavaScript 的 Windows Library 範本建立基本的應用程式。如果建立您的第一個應用程式時需要協助，請參閱使用 JavaScript 建立您的第一個 Windows 執行階段應用程式。

這個主題的這個程式碼使用 WinJS。如需如何在您的專案中包含 WinJS 的詳細資訊，請參閱快速入門：新增適用於 JavaScript 的 Windows Library 控制項和樣式。

指示

步驟 1: 設定您的應用程式用於存取網頁

應用程式必須明確新增特定功能，例如存取網路。如需功能的詳細資訊，請參閱應用程式功能宣告和如何設定網路功能。

在 Visual Studio 中，建立空白的 JavaScript 應用程式。
開啟 package.appxmanifest 檔案，然後移至 [功能] 索引標籤。
如果是 Windows 版的範例，應該已經選取 [網際網路 (用戶端)]**** 功能 (如果尚未選取，請立即選取)。如果應用程式可能需要以用戶端的形式連線到家用或工作網路上的 Web 服務，那麼也需要 [私人網路 (用戶端與伺服器)] 功能。

如果是 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();
})();

如需包含更多功能的可下載範例，請參閱整合 Web 服務內容和控制項的範例。

共用方式為