X

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

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:

  $.ajax({
    url: "https://api.github.com/users/juanmaguitar/repos",
    success: function( oData ) {
     // do things w/ oData (JS object)
    }
  })

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

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:

[advanced_iframe src=»//jsfiddle.net/juanma/5zahpaac/embedded/result,js/» width=»100%» height=»450″]

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 😉

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

  $.ajax({
    url: "https://api.spotify.com/v1/search?type=artist&query=led%20zeppelin",
    success: function( oData ) {
     // do things w/ oData (JS object)
    }
  })

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.

 $.ajax({
    url: "https://api.spotify.com/v1/search?type=artist&query=led%20zeppelin",
    dataType: "json",
    success: function( oData ) {
     // do things w/ oData (JS object)
     }
  })

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

 $.ajax({
    url: "https://api.spotify.com/v1/search",
    dataType: "json",
    data: {
      type: "artist",
      query : "led zeppelin"
    },
    success: function( oData ) {
     // do things w/ oData (JS object)
    }
  })

Ejemplo en acción:

[advanced_iframe src=»//jsfiddle.net/juanma/nfnt1qf9/embedded/result,js,html/» width=»100%» height=»600″]

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

Post Anterior
Post Siguiente
JuanMa Garrido: Senior Frontend Developer y Frontend Trainer, #Javascript specialist, co-founder de anotherWaves, administrador de pixelovers, autor de Apuntes de Javascript 

View Comments (10)

  • Buenas y gracias por el aporte,
    pero porque no funciona el buscador? Gracias!

  • Juan Ma, muchas gracias por la explicación, ahora me gustaría utilizar la api de spotify para cargar las portadas de las canciones que suena una corriente shoutcast en un Jplayer.
    Nuevamente gracias por su amable orientación y por indicarme que codigo debo utilizar para realizar esta labor.

    • Hola Leonidas,

      Con la API de Spotify GET https://api.spotify.com/v1/search puedes buscar lo que quieras (artistas, discos, canciones, etc...). A partir de ahi puedes localizar el disco (con el ID adecuado) al que pertenece el tema y mostrar la portada del mismo

      Saludos!

      • Juan Ma, muchas gracias... quería saber la manera en que la api de spotify, identifique de manera automatica la canción que suena en el momento en la corriente de shoutcast que se reproduce en el Jplayer y cargue la portada del artista respectivo de manera automatica... sobre todo si en el Jplayer, existen varias corrientes de shoutcast, seleccionables en un menú y cuando se elija una determinada, la api, pueda hacer lo suyo.

        Nuevamente Gracias por su tiempo y su importante respuesta, si fuera posible con un ejemplo de código. Se le quedará muy agradecido.

  • usted tiene que proporcionar el ejemplo de la API de Spotify para descargar?

    • Hola Aldejan,

      Si te fijas tienes el código del ejemplo (JS y HTML) disponible en jsFiddle para que lo puedas copiar y pegar si quieres

      Saludos!

  • 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.