So wird's gemacht: Erstellen eines Mashups (Windows-Runtime-Apps mit JavaScript und HTML)

Applies to Windows and Windows Phone

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

Voraussetzungen

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.

  1. Erstellen Sie in Visual Studio eine leere JavaScript-App.

  2. Öffnen Sie die Datei "package.appxmanifest", und wählen Sie die Registerkarte Funktionen aus.

  3. 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) {
            // TODO: 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.

Verwandte Themen

Weitere Ressourcen
Herstellen von Verbindungen mit Webdiensten
Behandeln von Ausnahmen in Netzwerk-Apps
So wird's gemacht: Herunterladen einer Datei mit "WinJS.xhr"
Referenz
WinJS.xhr
XMLHttpRequest
XMLHttpRequest-Erweiterungen
Beispiele
Integrieren von Inhalten und Steuerelementen aus dem Webdienstbeispiel
Beispiel zum Speichern und Laden von Inhalten mithilfe eines Blobs
Beispiel zur Webauthentifizierung
Beispiel zu XHR, Behandeln von Navigationsfehlern und URL-Schemas

 

 

Anzeigen:
© 2014 Microsoft