Come creare un mashup utilizzando WinJS.xhr (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Un mashup è un'applicazione Web che usa dati da due o più origini per creare qualcosa di nuovo. L'esempio mostra come usare XMLHttpRequest (XHR) per recuperare e visualizzare un feed rss remoto.

Cosa sapere

Tecnologie

WinJS.xhr

Prerequisiti

In questa guida introduttiva si suppone che tu sia in grado di creare un'app di base che usi il modello Libreria Windows per JavaScript. Se hai bisogno di aiuto per creare la tua prima app, vedi Creare la prima app di Windows Runtime in JavaScript.

Il codice presente in questo argomento usa WinJS. Per informazioni su come includere WinJS nel tuo progetto, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.

Istruzioni

Passaggio 1: Configurare l'app per l'accesso al Web

Le app devono aggiungere alcune funzionalità in modo esplicito, ad esempio l'accesso alla rete. Per altre informazioni sulle funzionalità, vedi Dichiarazioni di funzionalità delle app e Come configurare le funzionalità di rete.

In Visual Studio crea un'app JavaScript vuota.
Apri il file package.appxmanifest e vai alla scheda Funzionalità.
Per la versione di Windows dell'esempio, la funzionalità Internet (client) dovrebbe essere già selezionata, se non lo è selezionala. Se l'app deve essere in grado di connettersi come client a servizi Web su una rete domestica o aziendale, è necessaria anche la funzionalità Reti private (client e server).

Per la versione di Windows Phone dell'esempio, seleziona la funzionalità Internet (client e server).

Nota In Windows Phone è disponibile un'unica funzionalità di rete, Internet (client e server), che consente l'accesso completo alla rete per l'app.

Passaggio 2: Ottieni un feed RSS

La funzione WinJS.xhr usa XHR per recuperare dati da un URL specifico. WinJS.xhr è asincrono e restituisce Promise per i dati richiesti. Per ottenere il feed RSS, specifica un gestore soddisfatto per Promise. Puoi anche specificare un gestore di errore e un gestore di progresso.

Puoi chiamare la funzione WinJS.xhr da qualsiasi pagina del pacchetto (qualsiasi pagina nel contesto locale).

Nota Nota: l'URL di destinazione per una richiesta XHR non è limitato dal ApplicationContentUriRules dell'app, elencati nel manifesto del pacchetto dell'app.

In questo viene usato WinJS.xhr per accedere al feed RSS rss.msnbc.msn.com. Passa due funzioni di callback a Promise:

xhrParseXml: gestore soddisfatto. Questa funzione viene chiamata se la richiesta XHR è stata completata.
xhrError: gestore di errori. Questa funzione viene chiamata se la richiesta non è stata completata.

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

Nel passaggio successivo, definisci i metodi xhrParseXml e xhrError.

Passaggio 3: Analizza i risultati

Se la richiesta WinJS.xhr ha avuto esito positivo, il codice nell'ultimo esempio chiama la funzione xhrParseXml. La funzione xhrParseXml scorre gli elementi RSS e genera un link per ognuno. Visualizza il link in un divnella pagina principale, 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;
    }
}

L'esempio successivo mostra la dichiarazione HTML per l'area di output.

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

Passaggio 4: Gestisci gli errori

Esiste sempre la possibilità di non poter accedere ai dati remoti, quindi trova il modo di gestire gli errori che elaborano la richiesta XHR. L'esempio definisce un gestore di errore semplice.

Per altre informazioni, vedi Gestione delle eccezioni nelle app di rete.

function xhrError(result) {

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

Esempio completo

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

Per un esempio scaricabile contenente più funzionalità, vedi l'esempio di integrazione di contenuto e controlli da servizi Web.