en API

Obteniendo datos de API’s (Spotify, Github…) fácilmente con jQuery

phoyo-header

La mayoria de los proyectos frontend “modernos” lidian de una manera u otra con API’s. Pero cuando lidiamos con API’s externas y queremos conectar con ellas via AJAX hay una serie de factores que tenemos que tener en cuenta.


JSON

Primero, que el formato de intercambio de datos standard es JSON. Este formato, tal y como llega de forma nativa a través del objeto XMLHttpRequest es simplemente una cadena de texto. Para poder tratarlo correctamente tendremos que convertirlo antes en objeto Javascript (con  JSON.parse() por ejemplo).

Same-origin policy

Por otro lado AJAX tiene una limitación nativa llamada “Same-origin policy” (la politica del mismo origen) que básicamente limita las conexiones AJAX desde un archivo JS solo al dominio desde el que se ha servido el propio archivo JS.

Para lidiar con esta limitacion hay dos “soluciones” que la mayoria de las API publicas ofrecen para poder tener acceso a sus datos: JSONP y CORS

JSONP

JSONP (JSON con Padding) es una técnica mediante la que podemos obtener y tratar JSON desde otros dominios (utilizando javascript)

Con esta tecnica/hack obtenemos el JSON pasado como parámetro a una función que se ejecuta en el cliente.

CORS

CORS (Cross-Origin Resource Sharing) permite realizar peticiones a otros dominios siempre y cuando el dominio de destino (servidor) esté de acuerdo en recibir peticiones del dominio de origen.

Es una tecnología (especificación W3C) implementada en los navegadores actuales, que intercambia ciertas cabeceras HTTP con el servidor de destino para saber si debe permitir o no el intercambio de datos.

Para cada petición que se hace al servidor, éste devuelve una respuesta con unas cabeceras añadidas ( entre ellas Access-Control-Allow-Origin ) donde indica desde qué dominios puedes acceder a sus API’s (si el valor es Access-Control-Allow-Origin: * puedes acceder desde cualquier dominio)

Cada vez más API’s publicas permiten CORS pero la mayoria ofrecen solo JSONP.

Accediendo a API’s sencillas utilizando $.ajax()

Cuando empezamos a investigar cómo utilizar una determinada API encontramos diferentes maneras de acceder a ellas (algunas más fáciles que otras).

Algunas API’s requieren que añadas un token en cada petición,  en otras además tienes que especificar desde su web (de developers) los dominios desde los que realizarás las peticiones (sólo serán aceptadas las peticiones que provengan de esos dominio), otras sólo permiten acceder a sus datos utilizando sus propias SDK… y así hasta unas cuantas formas más de “controlar” quien y cómo acceden a sus datos via API.

Pero… hay unas cuantas API’s que se podrian considerar sencillas porque:

  • Ni requieren token ni ninguna configuracion extra
  • Tienen CORS implementado para cualquier origen

Por tanto, cualquier petición que hagamos a su API desde cualquier dominio (localhost por ejemplo) nos va a funcionar sin problemas.

Además, el método $.ajax, aparte de permitirnos expresar la petición de forma semántica y sencilla, tiene la ventaja añadida de que devuelve directamente el objeto JSON transformado a objeto javascript

Asi que, sabiendo todo esto, podemos utilizar el método $.ajax() para hacer peticiones AJAX a estas API’s de forma MUY sencilla.

La API de GitHub

Por ejemplo, la API de github implementa CORS para cualquier origen, lo que significa que podemos hacer peticiones utilizando $.ajax de forma tan sencilla como:

Si miramos las cabeceras de esta petición (request y response) podemos ver lo siguiente

header-github

Como la cabecera Origin: http://localhost enviada por nuestro navegador (que soporta CORS) es un origen válido para la cabecera Access-Control-Allow-Origin: * devuelta por el servidor, la respuesta es válida y contiene la info pedida sin que tengamos que hacer nada mas.

Ejemplo en acción:

La API de Spotify

La API de Spotify requiere autorización extra para algunas acciones, pero para sólo consultar información (utilizando GET) la API acepta consultas desde cualquier dominio… al menos hasta la fecha de hoy 😉

Captura de pantalla 2016-02-21 a las 10.22.59

Por tanto las consultas a esta API quedan tan sencillas como:

En la petición $.ajax() podemos especificar en el dataType el tipo de datos que vamos a recibir. Si no lo especificamos, jQuery tratará de averiguarlo basándose en el MIME type de la respuesta.

Las peticiones marcadas (específicamente o automáticamente) como dataType: "json", son devueltas a la función callback sucess ya convertidas a objeto javascript.

Si queremos pasar parámetros podemos concatenarlos a la URL pasada en la propiedad url o podemos pasarlos a través de la propiedad data del objeto de configuración

Ejemplo en acción:

¿Qué te ha parecido este articulo? ¿Alguna API “sencilla” que estés utilizando y quieras compartir?

Posts Relacionados

JQuery 1.1.3: más rápido, más estable, igual de li... JQuery, mi framework javascript preferido, se ha actualizado hoy a la versión 1.1.3. En esta nueva versión aseguran haber mejorado la velocidad de pa...
Jquery 1.1.4: Nueva versión, y siguen mejorando JQuery, uno de los mejores frameworks javascript que podéis encontrar actualmente ( el mejor, si me apuráis ), ha publicado hace unos días una actua...
JQuery 1.2 y su nueva librería User Interface Los chicos de JQuery no paran. Hace unos días anunciaban la última release de la versión 1.1, y ayer por la noche comentaban en su blog que ya está di...
  • vivaldinho

    Buenas y muchas gracias por el aporte.
    Mi cuestión, seguro que parece un tanto ridícula, pero ahí va:
    Cual es el entorno que debo tener dispuesto para poder probarlo?
    Gracias anticipadas.