Migliorando il nostro codice

L’esempio precedente andava bene per un primo contatto, però , in un’applicazione reale, questo codice sarebbe piuttosto povero e difficile da mantenere, quindi cercheremo di aggiungere i seguenti miglioramenti:

  • Permettere di specificare la callback come parametro della funzione
  • Permettere di specificare qual è il nome del parametro nel quale si specifica la callback da richiamare in automatico, in caso che flickr sia jsoncallback
  • Aggiungere ulteriori parametri all’URL in modo semplice
  • Incapsulare il codice nello spazio dei nomi JSONP
    (‘le variabili globali sono un male‘)

Quindi, al lavoro! Prima di tutto ho messo lo schema per poi andare a riempirlo mano a mano:

var JSONP = {
  // Salva il riferimento allo script
  script: null,
  // Salva le opzioni specificate
  options: {},
  // Effettua la chiamata all'url specificato 
  // seguendo le opzioni passate
  call: function(url, options){
  },
  // Riceve il risultato
  process: function(data) {
  }
};
Il metodo call
È il metodo che si occupa d’inviare la richiesta al server seguendo i parametri specificati. Il secondo parametro deve essere un oggetto con le seguenti proprietà:

  • callback: Il nome della funzione da eseguire quando arriva la risposta
  • callbackParamName: nome del parametro GET che definisce il nome della funzione da chiamare (ricorda jsoncallback nel caso di Flickr)
  • params: un oggetto del tipo chiave-valore da serializzare e incorporarlo nell’URL

Un esempio dell’oggetto options sarebbe:

var options = {
  callback:  miaFunzione,
  callbackParamName: "jsoncallback",
  params: { 
    a=1, 
    b=2
  }
};
E questo sarebbe il codice del metodo:
call: function(url, options){
  // Verifica le opzioni
  if(!options) this.options = {};
  this.options.callback = options.callback || function(){};
  this.options.callbackParamName = options.callbackParamName || "callback";
  this.options.params = options.params || [];
  // Determina se aggiungere un parametro 
  // separato da ? o da &
  var separator = url.indexOf("?") > -1? "&" : "?";
  // 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
  var head = document.getElementsByTagName("head")[0];
  if(this.script){
    head.removeChild(script);
  }
  script = document.createElement("script");
  script.type = "text/javascript";
  // Aggiunge e carica lo script, 
  // indicando di chiamare JSONP.process
  script.src = url + separator + stringParams + (stringParams?"&":"") + this.options.callbackParamName +"=JSONP.process";
  head.appendChild(script);
}
Credo che non ci sia molto da spiegare, poiché migliora solo la base precedente, solo la logica cambia appena.
Il metodo process
Questa è la funzione che nostro codice forza a eseguire una volta che i dati vengono caricati: qui si possono fare i compiti ordinari di deserializzazione di dati, controllo degli errori, ecc. Nel nostro caso serve solo da ponte tra il server e il callback specificato.
process: function(data) {
  // Qui si possono fare 
  // le operazioni comuni per trattare i dati
  this.options.callback(data);
}
Dopo aver visto i metodi, vediamo di provarlo.
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…