So wird’s gemacht: Erstellen eines Mashups mit WinJS.xhr (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Ein Mashup ist eine Webanwendung, die Standarddaten aus zwei oder mehr Quellen zum Erstellen von etwas Neuem verwendet. In diesem Beispiel ist die Verwendung von XMLHttpRequest (XHR) zum Abrufen und Anzeigen eines Remote-RSS-Feed (Really Simple Syndication) zu sehen.

Wissenswertes

Technologien

WinJS.xhr

Voraussetzungen

In diesem Thema wird vorausgesetzt, dass Sie eine einfache App erstellen können, die auf der Vorlage "Windows-Bibliothek für JavaScript" basiert. Informationen zum Erstellen Ihrer ersten App finden Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript.

Der Code in diesem Beispiel verwendet WinJS. Weitere Informationen zum Einschließen von WinJS in Ihr Projekt finden Sie unter Schnellstart: Hinzufügen von Steuerelementen und Vorlagen der Windows-Bibliothek für JavaScript.

Anweisungen

Schritt 1: Einrichten der App für den Zugriff auf das Web

Bestimmte Funktionen müssen Apps explizit hinzugefügt werden, z. B. der Zugriff auf das Netzwerk. Weitere Informationen zu Funktionen finden Sie unter Deklaration der App-Funktionen und So wird's gemacht: Konfigurieren von Netzwerkfunktionen.

Erstellen Sie in Visual Studio eine leere JavaScript-App.
Öffnen Sie die Datei "package.appxmanifest", und wählen Sie die Registerkarte Funktionen aus.
Für die Windows-Version des Beispiels sollte die Funktion Internet (Client) bereits ausgewählt sein. Wenn dies nicht der Fall ist, wählen Sie sie jetzt aus. Falls die App als Client eine Verbindung mit Webdiensten in einem Heim- oder Arbeitsplatznetzwerk herstellen können muss, ist außerdem die Funktion Private Netzwerke (Client und Server) erforderlich.

Wählen Sie für die Windows Phone-Version des Beispiels die Funktion Internet (Client und Server) aus.

Hinweis Unter Windows Phone gibt es nur eine Netzwerkfunktion – Internet (Client und Server) –, die den Netzwerkzugriff komplett für die App aktiviert.

Schritt 2: Abrufen eines RSS-Feeds

Die WinJS.xhr-Funktion verwendet XHR zum Abrufen von Daten von einer angegebenen URL. WinJS.xhr ist asynchron und gibt eine Promise für die angeforderten Daten zurück. Zum Abrufen des RSS-Feeds geben Sie einen erfüllten Handler für diese Promise ab. (Sie können auch einen Fehlerhandler und einen Fortschrittshandler angeben.)

Sie können die WinJS.xhr-Funktion auf allen Seiten in Ihrem Paket abrufen (allen Seiten im lokalen Kontext).

Hinweis Hinweis: Die Ziel-URL für eine XHR-Anforderung wird nicht durch die ApplicationContentUriRules der App (die im Paketmanifest der App aufgeführt sind) eingeschränkt.

In diesem Beispiel wird WinJS.xhr für den Zugriff auf den RSS-Feed rss.msnbc.msn.com verwendet. Dabei werden zwei Rückruffunktionen an die Promise übergeben:

xhrParseXml: der erfüllte Handler. Diese Funktion wird aufgerufen, wenn die XHR-Anforderung erfolgreich war.
xhrError: der Fehlerhandler. Diese Funktion wird aufgerufen, wenn die XHR-Anforderung nicht erfolgreich war.

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

Sie definieren die Methoden xhrParseXml und xhrError im nächsten Schritt.

Schritt 3: Analysieren der Ergebnisse

Wenn die WinJS.xhr-Anforderung erfolgreich ist, ruft der Code im letzten Beispiel xhrParseXml auf. Die xhrParseXml-Funktion durchläuft die RSS-Elemente und generiert einen Link zu jedem Element. Sie zeigt den Link in einem Bereich auf der Hauptseite an, 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;
    }
}

Im nächsten Beispiel ist die HTML-Deklaration für den Ausgabebereich dargestellt.

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

Schritt 4: Behandeln von Fehlern

Es besteht immer eine Wahrscheinlichkeit, dass Sie nicht auf die Remotedaten zugreifen können. Stellen Sie daher eine Möglichkeit zum Behandeln von Fehlern beim Verarbeiten Ihrer XHR-Anforderung bereit. Mit diesem Beispiel wird ein einfacher Fehlerhandler definiert.

Weitere Informationen finden Sie unter Behandeln von Ausnahmen in Netzwerk-Apps.

function xhrError(result) {

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

Vollständiges Beispiel

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

Unter Integrieren von Inhalten und Steuerelementen aus dem Webdienstbeispiel können Sie ein Beispiel herunterladen, das weitere Funktionen enthält.

Freigeben über