Informazioni su JSONP

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:

<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):
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

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:
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.
Similari
Creare URL corto utilizzando jQuery e Ajax
16% JQuery
Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asin…
Come verificare se un file esiste utilizzando jQuery
11% JQuery
Il modo migliore per farlo è con una richiesta AJAX HEAD. Le richieste HEAD sono molto più veloci delle richieste POST o GET e ritorna l’intestazione dal file di destinazione. Vale anche la pena notare che una richiesta HE…
Il framework jQuery e jQuery-plugins
10% Plugins
jQuery è una ben nota libreria Javascript Web 2.0 light-weight cross-browser, sviluppato da un team guidato da John Resig. jQuery è costruito sulla cima di Sizzle, che è un motore per i selettori CSS scritto in Javascript …
Utilizzando il metodo data() di jQuery
8% JQuery
Ad un certo punto, tutti noi dobbiamo memorizzare qualche set di dati sul client. Possiamo memorizzare lo spazio dei nomi di variabili sempre in maggiore quantità evitando collisioni; possiamo memorizzare le variabili in q…
Utilizzare il metodo data() di jQuery per memorizzare i dati nel DOM
8% JQuery
Se, per un motivo o un altro, si ha bisogno di archiviare temporaneamente i dati, jQuery ha un metodo .data() per la memorizzazione i dati nel DOM. Questo sistema è preferibile da altri come quando si vuole manipolare i va…