jQuery: recuperare le immagini da Flickr utilizzando JSON

Circa un anno fa mi sono occupato di realizzare una funzione per recuperare le immagini di Flickr utilizzando il PHP ed il linguaggio XML. Oggi invece realizzeremo la stessa cosa utilizzando però jQuery attraverso il famoso formato di scambio dati JSON.

Prima di procedere, però, vediamo brevemente cos’è e come funziona. JSON è un “linguaggio” (consentitemi la parola, seppure errata) che consente di scambiare dati tra web services o linguaggi di programmazione differenti. Il concetto di base è come quello del CSV o dell’XML, ovvero un formato standard che consente di far comunicare applicazioni anche completamente differenti tra di loro.

Cos’è JSON e Come funziona

Il formato JSON è davvero semplicissimo da usare e, sempre più spesso, è utilizzato come formato di scambio nelle richieste AJAX. Il suo punto di forza infatti è la struttura con cui sono implementati i dati in esso contenuti, tale struttura consente di trasportare non solo stringhe ma veri e propri oggetti.

La sintassi del JSON, utilizzando Javascript, è la seguente:

var object = {
  "id" : "id_object",
  "field1" : "value",
  "field2" : "value"
}

Come potete vedere, la struttura è molto semplice. L’oggetto è simile ad un array associativo, quindi caratterizzato dalle coppie chiave=>valore.

Sfruttando il formato JSON, vediamo ora quanto sia davvero semplice recuperare le nostre immagini di Flickr usando jQuery e pochissime righe di codice.

Recuperare il nostro ID di Flickr

Prima di procedere, abbiamo la necessità di sapere il nostro ID di Flickr, fondamentale per effettuare le richieste. La soluzione più semplice e veloce per recuperarlo, se non abbiamo voglia di spulciare tra le pagine di Flickr, è utilizzare lo strumento idGettr.

idGettr è un utilissimo servizio web che, attraverso l’immisione dell’username utilizzanto in Flickr ci restituisce l’ID corrispondente.

Una volta recuperato l’ID possiamo procedere con la creazione della pagina HTML.

Codice HTML

Non abbiamo bisogno di particolari esigenze di layout. Una volta realizzata la nostra pagina web, dobbiamo semplicemente inserire un div in cui saranno caricate le immagini. In questo caso, subito dopo il tag ho creato un div vuoto come il seguente:

jQuery e JSON

Per effettuare il parsing del formato JSON abbiamo bisogno di un metodo già integrato nella libreria di jQuery: getJSON(). Tale metodo consente di effettuare una richiesta asincrona alla url che definiamo e, una volta ricevuti i dati, effettua il parsing attraverso un altro metodo già incluso nella libreria, il parseJSON(). Il tutto avviene in maniera del tutto invisibile ai nostri occhi, e dobbiamo solo preoccuparci di creare una funzione che manipoli le informazioni ricevute.

Vediamo ora la funzione che andiamo a realizzare. Essa prenderà in ingresso due parametri, il primo contenente l’ID dell’utente e il secondo contenente il numero di immagini da visualizzare. Se l’ID non è presente, verranno visualizzate le immagini prese dalla timeline pubblica. La funzione effettuerà una richiesta alle API di Flickr craendo un elemento di tipo immagine per ogni oggetto ricevuto dalla richiesta Ajax.

La funzione è la seguente:

function get_flickr_images( id, number ) {
  $_url = id ? "http://api.flickr.com/services/feeds/photos_public.gne?id="+id+"&format=json&jsoncallback=?" : "http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?";
  $_number = number ? number-1 : 9;

  $.getJSON(
    $_url,
    function(data) {
      $.each(data.items, function(i,item){
        $("").attr("src", item.media.m).appendTo('#flickr');
        if ( i == $_number ) return false;
      });
    }
  );
}

Vediamo nel dettaglio ogni riga.

La prima riga controlla che sia stato passato l’ID, in caso contrario si farà la richiesta alla timeline pubblica.

La seconda riga verifica che sia stato passato il numero di immagini da visualizzare, in caso contrario ne verranno visualizzate 10.

La riga 4 effettua la richiesta effettiva alla url definita nella riga successiva. I dati ricevuti dalla richiesta vengono processati e passati alla funzione che si occuperà di creare gli oggetti di tipo immagine all’interno del div creato in precedenza.

A questo punto abbiamo completato la nostra funzione e non ci resta che richiamarla al caricamento della pagina:

$(function(){
get_flickr_images('34599522@N04', 5);
});

Conclusioni

Abbiamo visto quanto semplice sia effettuare una richiesta JSON utilizzando jQuery. Ovviamente sarebbe stato possibile utilizzare JSON anche con il PHP e probabilmente me ne occuperò in futuro. Possiamo ora vedere all’opera lo script o scaricarlo dai seguenti link:

Demo Download