Как создать гибридное веб-приложение с помощью WinJS.xhr (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Гибридное веб-приложение — это веб-приложение, которое использует данные из двух и более источников для создания новых объектов. Этот пример демонстрирует, как с помощью XMLHttpRequest (XHR) можно получить и отобразить удаленный RSS-канал.

Что необходимо знать

Технологии

WinJS.xhr

Необходимые условия

Предполагается, что вы умеете создавать простые приложения с использованием шаблона библиотеки Windows для JavaScript. Подробнее: Создание первого приложения среды выполнения Windows на JavaScript.

В коде, приведенном в этом разделе, используется библиотека WinJS. Сведения о том, как включить библиотеку WinJS в проект, см. в разделе Краткое руководство: добавление элементов управления и стилей библиотеки Windows для JavaScript.

Инструкции

Этап 1: Настройка доступа приложения к Интернету

Некоторые возможности для приложений нужно задавать явно, например доступ к сети. Подробнее о возможностях см. в разделах Объявления возможностей приложений и Как настроить возможности сетевого подключения.

В Visual Studio создайте пустое приложение JavaScript.
Откройте файл Package.appxmanifest и выберите вкладку Возможности.
Для версии примера для Windows возможность Интернет (клиент) должна быть уже выбрана, но если это не сделано, выберите ее. Если приложению может понадобиться возможность подключаться от имени клиента к веб-службам в домашней или рабочей сети, то также потребуется возможность Частные сети (клиент и сервер).

Для версии примера для Windows Phone выберите возможность Интернет (клиент и сервер).

Примечание Для Windows Phone предусмотрена только одна сетевая возможность, Интернет (клиент и сервер), разрешающая приложению все типы сетевого доступа.

Этап 2: Получение RSS-канала

Функция WinJS.xhr использует XHR для получения данных с указанного URL-адреса. Функция WinJS.xhr является асинхронной и возвращает Promise для запрошенных данных. Чтобы получить RSS-канал, вам следует указать обработчик выполнения для этого объекта Promise. (Можно также указать обработчик ошибок и обработчик хода выполнения.)

Вы можете вызвать функцию WinJS.xhr с любой страницы в вашем пакете (с любой страницы в локальном контексте).

Примечание Примечание. Целевой URL-адрес для XHR-запроса не ограничен правилами ApplicationContentUriRules приложения (эти правила указаны в манифесте пакета приложения).

В следующем примере функция WinJS.xhr используется для получения RSS-канала rss.msnbc.msn.com. Она передает две функции обратного звонка объекту Promise:

xhrParseXml: обработчик выполнения. Эта функция вызывается, если XHR-запрос выполнен успешно.
xhrError: обработчик ошибок. Эта функция вызывается, если выполнить XHR-запрос не удалось.

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

Загружаемый образец с дополнительными функциями см. в разделе Образец интеграции содержимого и элементов управления из веб-служб.