Informazioni su JSONP

Indice

JSONP sta per JavaScript Object Notation with Padding, cioè una forma di estensione JSON per supportare chiamate tra domini. Secondo wikipedia, questo termine è stato proposto nel blog MacPython nel 2005 e da allora ha cominciato ad essere utilizzato su tutti gli ambienti con applicazioni web 2.0.
Il funcionamento in cui essa si fonda, è che con il nostro codice HTML siamo in grado di caricare uno script da un dominio remoto, in modo che se abbiamo un nostro dominio miodominio.com, siamo in grado di fare perfettamente il seguente:

Copia codice 

<script type="text/javascript" src="http://www.dominioremoto.com/dati.js"></script>
Quindi, se questo script restituisce i dati in formato JSON, possiamo processarli senza alcun problema. Ma cosa succede con questi dati? Come possiamo accedere a loro? Beh si può semplicemente avere informazioni, ma non è possibile accedervi.
JSONP si basa sulla capacità dei browser di aggiungere dei script da altri domini per accedere a tali informazioni.
Tuttavia, il metodo JSONP comporta un po’ di collaborarione aggiuntiva dal nostro server di dati, nel senso che il server dovrà occuparsi di mettere questi dati come parametri in una funzione che esiste nel nostro codice client. È possibile che ti sia un po’ perso, ma sicuramente con un esempio si può vedere meglio, quindi cerchiamo di creare un piccolo codice per estrarre informazioni attraverso l’API di flickr.

Come funziona: Accesso alle API di Flickr
⤽
Se si naviga un po’ per il riferimento delle API di flickr, si può facilmente trovare un esempio di URL per ricevere i dati in formato JSON.
Se si accede all’esempio, vedrete che tornerà qualcosa del genere (è possibile che la chiave API cambi, per sicurezza; in ogni caso si può vedere dalla sezione di esempi della sua documentazione):
Copia codice 

jsonFlickrApi({
  "method":{
    "_content":"flickr.test.echo"
  },
  "format":{
    "_content":"json"
  },
  "api_key":{
    "_content":"ca961e5f59eebb3339a87c168e390998"
  },
  "stat":"ok"
});
Ora immaginate cosa accadrebbe se si includiamo l’URL (script) nel nostro head del codice HTML della pagina. Si chiamerà la funzione jsonFlickrApi e come parametro si avranno tutte le informazioni in formato JSON. In questo modo, siamo riusciti ad estrarre i dati dal server remoto e anche di processarli, che è quello che realmente ci interessa.
Tutti i server che espongono le API in formato JSON, dovrebbero (o devono) accettare un parametro GET in cui si specificherà quale sarà in nome della funzione ricevitrice nel nostro codice locale, in modo da poter essere più dinamico e personalizzabile. Nel caso di flickr questo parametro si chiama jsoncallback.

Se un server vuole esporre JSON per applicazioni Javascript, deve permettere di specificare il nome della tua funzione mediante un parametro nell’URL.

Quindi, se accediamo al seguente URL: http://www.flickr.com/services/rest/?method=flickr.test.echo&format=json&api_key=fb3db427da4bcda80f74ea31c64cd64d&jsoncallback=miaFunzione
Otterremo il seguente codice

Copia codice 

miaFunzione({
  "method":{
    "_content":"flickr.test.echo"
  },
  "format":{
    "_content":"json"
  },
  "api_key":{
    "_content":"85f336549dc99ecaddc7d6cdea76b4b8"
  },
  "jsoncallback":{
    "_content":"miaFunzione"
  },
  "stat":"ok"
});
Nel caso di Flickr, ci permette anche di aggiungere il parametro nojsoncallback = 1 con il quale ritorneranno solo dati, ma questo non conterà niente in Javascript, perché come scritto prima, i dati si ricevono e … lì rimangono, non può essere trattato in alcun modo.
Creare una chiamata AJAX ad un server remoto
⤽
Bene, ora che conosciamo e capiamo la teoria, è il momento della pratica. Come sapete, le chiamate devono essere effettuate attraverso l’inserimento del tag -script- (Javascript) che ci permettono di scaricare contenuti da server remoti. Sapendo questo, un semplice codice potrebbe essere scritto come segue:
Copia codice 

function jsonp(url){
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  head.appendChild(script);
}
function json_process(data){
  alert(data);
  console.info(data);
}
function test(){
  var url = "http://www.flickr.com/services/rest/?method=flickr.test.echo&format=json&api_key=fb3db427da4bcda80f74ea31c64cd64d&jsoncallback=json_process";
  jsonp(url);
}
Quindi, se noi ora chiamiamo la funzione test() su l’evento di caricamento della pagina, riceveremo i dati dal dominio di flickr, questo sarebbe il nostro esempio ‘Ciao Mondo’ (senza Ciao Mondo).
Poi creeremo un codice che possa essere riutilizzabile e più completo.