Provando il codice

Indice

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

Copia codice 

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:
Copia 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:
Copia codice 

(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:
Copia 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);
}
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!