Provando il codice

Ora che abbiamo definito la nostra piccola classe, siamo in grado di effettuare chiamate a domini remoti in modo molto semplice:

function test(){
  var url = "http://www.flickr.com/services/rest/?method=flickr.test.echo&format=json&api_key=fb3db427da4bcda80f74ea31c64cd64d";
  var params = {
    callback: function(data){ 
      alert(data);
    },
    callbackParamName: "jsoncallback",
  };
  JSONP.call(url, params);
}
O approfittando in pieno il nostro codice:
function test(){
  var url = "http://www.flickr.com/services/rest";
  var params = {
    callback: function(data){ 
      alert(data);
    },
    callbackParamName: "jsoncallback",
    params: {
      method: "flickr.test.echo",
      format: "json",
      api_key: "fb3db427da4bcda80f74ea31c64cd64d"
    }
  };
  JSONP.call(url, params);
}
Non è che così rimane più curioso e pulito? Oltre ad essere un codice molto più facile da riutilizzare, è possibile implementarlo su qualsiasi progetto e continua a funzionare perfettamente.

JSONP in jQuery
In verità non mi sono preso la briga di cercare dei plugin per includere JSONP in jQuery (di fatto non ho mai avuto bisogno di utilizzare JSONP). Ma da qualche precedente articolo avevo spiegato come creare un plugin per jQuery, ho deciso di rendere il codice di sopra un plugin, e quindi dare il buon esempio:
(function($){
  $.extend({
    jsonp: {
      script: null,
      options: {},
      call: function(url, options) {
        var default_options = {
          callback: function(){},
          callbackParamName: "callback",
          params: []
        };
        this.options = $.extend(default_options, options);
        // Determina se aggiungere un parametro 
        // separato da ? o da &
        var separator = url.indexOf("?") > -1? "&" : "?";
        var head = $("head")[0];
        // Serializza l'oggetto in una stringa di testo 
        // con formato URL
        var params = [];
        for(var prop in this.options.params){
          params.push(prop + "=" + encodeURIComponent(options.params[prop]));
        }
        var stringParams = params.join("&");
        // Crea lo script o cancella l'utilizzato in precedenza
        if(this.script){
          head.removeChild(script);
        }
        script = document.createElement("script");
        script.type = "text/javascript";
        // Aggiunge e carica lo script, 
        // indicando di chiamare il metodo process
        script.src = url + separator + stringParams + (stringParams?"&":"") + this.options.callbackParamName +"=jQuery.jsonp.process";
        head.appendChild(script);
      },
      process: function(data) { 
        this.options.callback(data); 
      }
    }
  });
})(jQuery);
Così ora è anche possibile effettuare quanto segue (assumendo che la libreria jQuery sia già inclusa:
function test(){
  var url = "http://www.flickr.com/services/rest";
  var params = {
    callback: function(data){ 
      alert(data);
    },
    callbackParamName: "jsoncallback",
    params: {
      method: "flickr.test.echo",
      format: "json",
      api_key: "fb3db427da4bcda80f74ea31c64cd64d"
    }
  };
  $.jsonp.call(url, params);
}
Come sempre con jQuery ci rimane molto più facile da usare.
Conclusione
Infine, commentare che questa guida nasce da un lavoro di ricerca (research sarebbe più fico) nel mio week-end, quindi se vedete qualche baco sia sulla sicurezza di logica o persino di concetti, mi auguro di essere informato per riparare.
Spero che il codice che ho condiviso vi aiutino o addirittura vi motivino a creare applicazioni basate su questo tipo di API, giacché è davvero interessante per essere asincrona e per permettere la comunicazione con un altro server direttamente senza passare dal nostro.
Fino alla prossima volta!
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…