如何使用 WinJS.xhr 创建混合 Web 应用程序 (HTML)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

混合 Web 应用程序是一种使用来自两个或更多数据源的数据创造出全新事物的 Web 应用程序。这一示例演示了如何使用 XMLHttpRequest (XHR) 来检索和显示远程真正简单的整合 (RSS) 源。

你需要了解的内容

技术

WinJS.xhr

先决条件

我们假设，你可以创建使用 Windows JavaScript 库模板的基本应用。有关创建第一个应用的帮助，请参阅创建第一个采用 JavaScript 的 Windows 运行时应用。

本主题中的此代码使用 WinJS。有关如何在你的项目中添加 WinJS 的信息，请参阅快速入门：添加 Windows JavaScript 库控件和样式。

说明

步骤 1: 设置你的应用以访问 Web

应用需要显式添加特定功能，例如访问网络的功能。有关这些功能的详细信息，请参阅应用功能声明和如何配置网络功能。

在 Visual Studio 中，创建一个空白 JavaScript 应用。
打开 package.appxmanifest 文件并转到“功能”选项卡。
对于该示例的 Windows 版本，应已选中“Internet (客户端)”****功能，但如果尚未选中，则立即进行此操作。如果应用需要作为客户端连接到家庭网络或工作网络上的 Web 服务，则还需要设置“专用网络(客户端和服务器)”功能。

对于示例的 Windows Phone 版本，请选择“Internet (客户端和服务器)”****功能。

注意在 Windows Phone 上，只存在“Internet (客户端和服务器)”这一种网络功能，该功能支持对该应用的所有网络访问。

步骤 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 项并为每一项生成链接。它将在主页的 div 中显示链接，xhrOutput。

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 服务示例中的内容和控件。