[Win8] JavaScript – Llamadas a servicio de datos externos “Cross-Domain”

Con la llegada del nuevo sistema operativo de Microsoft, se nos abre un inmenso abanico de posibilidades a los desarrolladores web que no podemos desaprovechar. Ya que podemos crear estas nuevas aplicaciones con HTML 5 y JavaScript para que corran de forma nativa en la nueva interfaz. De esta manera podremos reutilizar todos nuestros conocimientos y nuestra experiencia en realizar aplicaciones que podrán ser consumidas directamente por millones de usuarios potenciales gracias a la nueva tienda de Windows.

Lo primero que tenemos que tener claro es que las aplicaciones web pueden ejecutarse en dos contextos diferentes.

1. El usuario puede abrir la aplicación web desde el navegador que más le guste como se ha realizado siempre. Y la aplicación se ejecutara en un entorno limitado donde no se podrá acceder a las nuevas Apis que ofrece el sistema “WinRT, WinJS”.
2. El usuario ejecutara una aplicación de la App Store realizada con HTML y javascript, en este caso la aplicación se ejecutará de forma nativa y en un contexto local. Tenemos acceso a las Apis del sistema para disfrutar de todas las ventajas que nos ofrece Windows 8 accesible directamente desde nuestro código JavaScript.

Si ya tenemos claro estos dos escenarios, tendremos que adaptar un poco nuestras aplicaciones web para que funcionen correctamente como aplicación nativa en Windows8.

Por ejemplo si queremos consumir un servicio externo de datos “cross-domain” sin problemas, podemos utilizar la librería WinJS para hacer una llamada XmlHttpRequest de forma asíncrona y recuperar estos datos de una forma muy sencilla.

[sourcecode language=»javascript»]
WinJS.xhr({ url: "http://localhost:1489/api/demo" }).then(
function (response) {
var json = JSON.parse(response.responseText);
json.forEach(function (item) {
items.push(item);
}
);
}
);

[/sourcecode]

Este ejemplo accede a un servicio WebApi que retorna una lista de datos en formato JSon, hay que destacar que está utilizando el patrón Promise para realizar la llamada de forma asíncrona como casi siempre que interactuemos con las Apis de Windows 8.

Los parámetros que acepta esta función son:

• type: (opcional). Especifica el Verbo HTTP a utilizar GET, POST, HEAD “petición sin cuerpo de mensaje”. Por defecto la llamada es GET.
• url: URL del servicio de Datos.
• user: (opcional). String con el nombre de usuario para la autentificación.
• password: (opcional). String con la contraseña para la autentificación.
• headers: (opcional). Objeto cuyas propiedades se usan como nombres de encabezado y los valores de las propiedades se utilizan como valores de estas propiedades del encabezado.
• data: (opcional). El objeto que se pasa como datos en la llamada.
• customRequestInitializer: (opcional). Función para utilizar antes de lanzar la llamada XmlHttpRequest.

Un ejemplo de una llamada estableciendo un parámetro en la cabecera, para asegurarse que la respuesta no está cacheada.

[sourcecode language=»javascript»]
WinJS.xhr({
url: " http://localhost:1489/api/demo ",
headers: {
"If-Modified-Since": "Mon, 27 Mar 1972 00:00:00 GMT"
}
})
.done(function complete(result) {
…
});

[/sourcecode]

Para más información sobre las propiedades que acepta la cabecera visitar HTTP Response Headers:

Y para finalizar veremos un ejemplo completo de una llamada a un servicio de datos enlazado a un ListView:

1. El origen de los datos que consulta al servicio: Un fichero Datos.js donde se especifica un espacio de nombres “Data” que utilizaremos más adelante para enlazar los datos con el control.

[sourcecode language=»javascript»]
(function () {

var items = new WinJS.Binding.List();

WinJS.xhr({ url: "http://localhost:32999/api/values" }).then(
function (response) {
var json = JSON.parse(response.responseText);
json.forEach(function (item) {
items.push(item);
}
);
}
);

var publicMembers = { Modelos: items };
WinJS.Namespace.define("Data", publicMembers);
})();
[/sourcecode]

2. Enlazamos los datos al control de lista de forma declarativa:

[sourcecode language=»html»]
<div id="lista" data-win-control="WinJS.UI.ListView"
data-win-options=" {
itemDataSource : Data.Modelos.dataSource,
layout:{type: WinJS.UI.GridLayout} }" >
</div>
[/sourcecode]

Con este sencillo ejemplo podemos comprobar que sencillo es recuperar los datos de un origen externo sin tenernos que preocupar por el cross-posting ya que se ejecuta la llamada en el contexto local y además se enlaza los datos de forma declarativa con nuestro control HTML.