Le novità di jQuery 1.5

Home > jQuery > Articoli > Le novità di jQuery 1.5

Articolo scritto da Riccardo Brambilla
Pagina 1 di 3

E' uscita da qualche settimana la versione 1.5 del nostro amato jQuery, seguita a stretto giro di posta dalla 1.5.1, fondamentalmente una bug-fixed version della prima.

Il mio primo istinto mi ha portato a pensare che si poteva aspettare ancora qualche tempo per sfornare questa nuova release, se non altro perchè il branch 1.4.x svolgeva già molto bene il proprio lavoro, senza contare che rimanere un pò di tempo in più su una versione regala agli utilizzatori un senso di stabilità e sicurezza.

(L'articolo continua più sotto...)

Quando però ho letto quello che è stato modificato e aggiunto ho cambiato immediatamente idea.

I cambiamenti nella 1.5 sono sostanziali, non tanto nelle funzionalità esposte ma per quanto lavoro è stato fatto dietro le quinte dagli sviluppatori soprattutto sul modulo Ajax, i cui cambiamenti apportati non esito a definire epocali, non tanto in generale (altri framework già usano ciò che qui si introduce ora) ma proprio per jQuery.

Vediamo un pò più nello specifico cosa è stato fatto.

Rivoluzione (e non refactoring) del modulo Ajax

Estensione di $.ajax()

Il team di sviluppo del framework ha riscritto buona parte delle API Ajax fornendo tre modi per estendere le funzionalità di $.ajax(): i prefilters, i converters ed i transports

I Prefilters

Un prefilter è una funzione di callback chiamata prima che la richiesta ajax sia effettivamente inviata e, come spiegato nella documentazione, prima di qualsiasi trattamento delle options da parte di $.ajax() stesso.

Il prefilter viene registrato utilizzando $.ajaxPrefilter():

$.ajaxPrefilter( function( options, originalOptions, jqXHR )

Spiegherò più avanti cos'è un jqXHR, per ora pensiamolo come un wrapper arricchito di un oggetto xmlHttpRequest.

L'esempio più interessante presente nella documentazione ci spiega un possibile utilizzo dei prefilters per modificare un opzione esistente

$.ajaxPrefilter( function( options ) {
  if ( options.crossDomain ) {
    options.url = "http://miodominio.it/proxy/" + encodeURIComponent( options.url );
    options.crossDomain = false;
  }
});

A dire: se l'opzione è crossDomain la chiamata viene proxata sulla URL http://mydomain.net/proxy/.

I converters

Un converter è una funzione di callback chiamata quando il datatype ricevuto risulta diverso da quello atteso.

E' possibile utilizzare $.ajaxSetup() per registrarlo globalmente:

$.ajaxSetup({
  converters: {
    "text miodatatype": function( textValue ) {
      if ( valid( textValue ) ) {
        // Qui la logica custom di parsing!
        return miodatatypeValue;
      } else {
        // Notifica un errore di parsing
        throw exception;
      }
    }
  }
});

oppure definirlo direttamente inline per ogni chiamata che lo richiedesse:

$.ajax( url, {
  dataType: "xml text miodatatype",
  converters: {
    "xml text": function( xmlValue ) {
      // Qui la logica di parsing!
      return textValue;
    }
  }
});

La motivazione più sensata per utilizzare un converter è che fornisce il modo di definire un proprio datatype poi utilizzabile come tipo di ritorno; il primo esempio ci permette di richiedere il tipo miodatatype in questo modo:

$.ajax( url, {
  dataType: "miodatatype"
});

N.B.: I datatype devono essere definiti come stringhe lowercase.

I Transports

Se non ci bastassero i converters e i prefilters per modellare le nostre richieste ajax, vengono messi a disposizione gli oggetti transports, che la documentazione definisce last resort (che tradurrei con "non usateli" oppure con "se vi sentite obbligati ad usarli forse dovete riflettere sulla logica che state utilizzando").

Ad ogni modo i transports forniscono due funzioni: send e abort e vanno registrati tramite $.ajaxTransport().

Ecco l'esempio base fornito nella documentazione:

$.ajaxTransport( function( options, originalOptions, jqXHR ) {
  if( /* transportCanHandleRequest */ ) {
    return {
      send: function( headers, completeCallback ) {
        /* send code */
      },
      abort: function() {
        /* abort code */
      }
    };
  }
});

e la descrizione dei parametri che traduco per vostra comodità:

options sono le opzioni della richiesta
originalOptions sono le opzioni così come passate al metodo ajax, non modiifcate e senza i default definiti da ajaxSettings
jqXHR è l'oggetto jqXHR della richiesta
headers e una mappa chiave/valore della richiesta che il transport può trasmettere se la supporta
completeCallback è la funzione che notifica ajax del completamento della richiesta.

la tipica struttura di un completeCallback è la seguente:

function( status, statusText, responses, headers ) {}

dove:

status rappresenta l'HTTP status code della risposta, i classici 200, 404 ...
statusText è la descrizione della risposta
responses è una mappa opzionale che definisce il datatype/valore contenente la risposta in tutti i formati accettati dal transport: ad esempio per una risposta in plain text: { text: textData }
headers è una stringa opzionale contentente i response Headers forniti da XMLHttpRequest.getAllResponseHeaders()

Abbiamo descritto ciò che è stato aggiunto per aumentare la flessibilità del modulo ajax, ma per l'utilizzo comune trovo molto più interessante commentare l'introduzione dei Deferred, prima di farlo però definiamo jqXHR che è il nuovo oggetto ritornato dalle chiamate ajax.

jqXHR

jqXHR è un superset del familiare oggetto XMLHTTPRequest che implementa l'interfaccia Promise fornendo tutti i metodi, le proprietà e i comportamenti definiti da una Promise:

Definizione: Una Promise è una vista read-only del risultato di un task e rappresenta il valore ritornato dal completamento della singola operazione.

Per maggiori informazioni leggi qui.

jQuery