Cómo crear un mashup con WinJS.xhr (HTML)

Un mashup es una aplicación web que usa datos de dos o más orígenes para crear algo nuevo. Este ejemplo muestra cómo usar XMLHttpRequest (XHR) para recuperar y mostrar una fuente Really Simple Syndication (RSS) remota.

Lo que debes saber

Tecnologías

Requisitos previos

Instrucciones

Paso 1: Configurar tu aplicación para acceder a Internet

Las aplicaciones deben aportar ciertas funcionalidades de forma explícita, como acceder a la red. Para más información sobre las funcionalidades, consulta Declaraciones de funcionalidades de aplicaciones y Cómo configurar funcionalidades de red.

  1. En Visual Studio, crea una aplicación JavaScript en blanco.

  2. Abre el archivo package.appxmanifest y ve a la pestaña Funcionalidades.

  3. En la versión de Windows del ejemplo, la función Internet (cliente) ya debe estar seleccionada, pero si no lo está, selecciónala ahora. Si la aplicación necesita poder conectarse como cliente a servicios web en una red doméstica o de trabajo, se necesita la función Redes privadas (cliente y servidor).

    En la versión de Windows Phone del ejemplo, selecciona la funcionalidad Internet (cliente y servidor).

    Nota  En Windows Phone solo existe una funcionalidad de red, Internet (cliente y servidor), que permite todo el acceso a la red para la aplicación.

Paso 2: Obtener una fuente RSS

La función WinJS.xhr usa XHR para recuperar datos de una dirección URL especificada. WinJS.xhr es una función asincrónica y devuelve un Promise para los datos pedidos. Para obtener la fuente RSS, especificas un controlador completado para este Promise. (También puedes especificar un controlador de errores y un controlador de progreso).

Puedes llamar a la función WinJS.xhr desde cualquier página del paquete (cualquier página del contexto local).

Nota  Nota: La dirección URL de destino de una solicitud XHR no está restringida por el elemento ApplicationContentUriRules de la aplicación (como se indica en el manifiesto del paquete de la aplicación).

Este ejemplo usa WinJS.xhr para acceder a la fuente RSS rss.msnbc.msn.com. Pasa dos funciones de devolución de llamada al objeto Promise:

  • xhrParseXml: el controlador correcto. Se llama a esta función si la solicitud XHR es correcta.
  • xhrError: el controlador de error. Se llama a esta función si la solicitud no es correcta.

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

Definirás los métodos xhrParseXml y xhrError en el siguiente paso.

Paso 3: Analizar los resultados

Si la solicitud WinJS.xhr se realizó correctamente, el código del último ejemplo llama a xhrParseXml. La función xhrParseXml establece una iteración en los elementos RSS y genera un vínculo para cada uno. El vínculo se muestra en un div de la página principal, 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;
    }
}

El siguiente ejemplo muestra la declaración HTML para el área de salida.


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

Paso 4: Controlar errores

Siempre existe la posibilidad de que no puedas acceder a los datos remotos; entonces proporciona una forma de controlar errores al procesar la solicitud XHR. Este ejemplo define un controlador de errores simple.

Para más información, consulta Controlar excepciones en aplicaciones de red.


function xhrError(result) {

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

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

Para obtener una muestra descargable que contiene más características, consulta el tema sobre cómo integrar contenido y controles de una muestra de servicios web.

Temas relacionados

Otros recursos
Conexión a servicios web
Controlar excepciones en aplicaciones de red
Cómo descargar un archivo con WinJS.xhr
Referencia
WinJS.xhr
XMLHttpRequest
Mejoras de XMLHttpRequest
Muestras
Integrar contenido y controles de una muestra de servicios web
Muestra del uso de un blob para guardar y cargar contenido
Muestra de autenticación web
Muestra de XHR, tratamiento de errores de navegación y esquemas de dirección URL

 

 

Mostrar:
© 2015 Microsoft