Ad un anno di distanza dal primo articolo di introduzione a jQuery, torniamo a parlare di questo popolare framework JavaScript. Attualmente l'ultima versione disponibile è la 1.4.3 che, rispetto alla major release precedente, porta una serie di miglioramenti volti soprattutto a:

• incrementare le performance: sono state riscritte le implementazioni dei metodi più usati, così da aumentare sensibilmente la velocità di esecuzione del codice JavaScript;
• compattare ulteriormente la sintassi, ad esempio con la possibilità di effettuare il binding contemporaneo di più eventi o l'impostazione degli attributi in fase di creazione di un oggetto: $("<a/>", { href: "...", title: "...", text: "..." });
• aumentare la produttività, fornendo nuovi metodi di utility, come ad esempio .has(), per determinare la presenza di elementi corrispondenti ad un selettore nella gerarchia di un oggetto, l'attraversamento del DOM fino ad un determinato selettore (con .nextUntil(), .prevUntil() e .parentsUntil()) o, ancora, l'impostazione di ritardi nell'esecuzione delle funzioni in coda tramite delay().

Per maggiori informazioni sulle novità introdotte con la release 1.4, rimandiamo alla documentazione ufficiale.

In questo articolo focalizzeremo l'attenzione sull'uso delle AJAX API di jQuery, mostrando numerosi esempi pratici di chiamata asincrona a servizi esposti con le principali tecniche messe a disposizione da ASP.NET e dal .NET Framework.

AJAX con jQuery

L'uso di AJAX nello sviluppo di applicazioni web interattive permette uno scambio di dati in background tra client (il browser) e server, così da poter aggiornare il contenuto della pagina senza doverla ricaricare interamente, con un guadagno sia in termini di usabilità (User Experience), sia di performance (riduzione della banda usata, quindi maggior velocità ed abbattimento dei costi).

jQuery include un completo set di API per effettuare chiamate AJAX. Il metodo di più basso livello è jQuery.ajax(): per poter effettuare una chiamata è sufficiente passare i parametri di configurazione necessari in formato chiave / valore. Le impostazioni più comuni del metodo sono:

• type: indica il metodo utilizzato per la chiamata (POST, GET, PUT o DELETE);
• contentType: specifica il content-type con cui viene effettuata la chiamata;
• url: l'indirizzo da invocare;
• data: specifica i dati da inviare al servizio;
• dataType: indica il formato atteso in risposta: xml, json, script o html;
• success: consente di specificare la funzione da invocare al corretto completamento della chiamata (callback); alla funzione vanno passati i seguenti parametri:
  - data: i dati ricevuti in risposta;
  - textStatus: una stringa descrittiva dello stato della chiamata;
  - XMLHttpRequest: l'oggetto utilizzato per la chiamata;
• error: consente di specificare la funzione da invocare qualora si verifichi un errore durante l'esecuzione della chiamata; alla funzione di callback vanno passati i seguenti parametri:
  - XMLHttpRequest: l'oggetto utilizzato per la chiamata;
  - textStatus: una stringa descrittiva dello stato della chiamata;
  - errorThrow: l'errore riscontrato (se disponibile).

Il metodo jQuery.ajaxSetup() consente di specificare le impostazioni predefinite da utilizzare per tutte le chiamate. Ad esempio, tramite:

$.ajaxSetup(
{
    type: "POST",
    dataType: "json"
});

possiamo definire che tutte le chiamate AJAX avranno come type "POST" e come dataType "json", senza dover specificare questi parametri ad ogni invocazione.

Le AJAX API espongono una serie di metodi wrapper su $.ajax(), così da avere delle "scorciatoie" per semplificare il codice necessario per effettuare i tipi di chiamate più comuni. Ad esempio, per effettuare una chiamata con type="POST" possiamo utilizzare il metodo $.post():

$.post("myServiceUrl", {}, function (msg) { alert(msg); }, "json");

In modo analogo avremo i metodi $.get() (chiamata con type="GET"), $.getJSON() (per caricare dati in formato JSON), $.getScript() (per caricare dinamicamente un file JavaScript) e $.load() (per inserire un blocco di codice HTML all'interno degli elementi specificati dal selettore).

Attraverso event handler specifici per AJAX possiamo gestire in modo centralizzato il comportamento dell'interfaccia utente, demandando alle funzioni di callback esclusivamente la parte applicativa più specifica. Possiamo, ad esempio, mostrare un messaggio di attesa all'utente durante l'esecuzione delle richieste e nasconderlo al termine dell'esecuzione:

$("#loading").ajaxStart(function()
{
    $(this).show();
});

$("#loading").ajaxStop(function()
{
    $(this).hide();
});

jQuery mette a disposizione anche alcune funzioni di utility per le necessità più comuni delle chiamate AJAX, come, ad esempio, ottenere la rappresentazione dei valori inseriti in un form in formato QueryString:

var formQueryString = $("form").serialize();

Esporre l'applicazione come servizio

Gli esempi di servizi che verranno presentati nel corso dell'articolo si basano su una semplice applicazione per la consultazione del catalogo dei libri pubblicati dallo staff di ASPItalia:

La classe Book definisce le caratteristiche dell'entità "libro", mentre la classe BookManager contiene la business logic per l'accesso in lettura al catalogo, persistente in un file caricato mediante LINQ to XML. I tre metodi disponibili risultano significativi da un punto di vista didattico in quanto consentono di:

• accedere ad una singola entità (GetRandom che restituisce un libro casuale);
• accedere ad una lista di entità (GetAll che restituisce tutti i libri disponibili);
• utilizzare i parametri in ingresso (GetByIsbn che restituisce un libro dato il suo codice ISBN).

I metodi di BookManager vengono esposti come servizi, usando diverse tecniche: web service ASMX, Page Method di una WebForm (ASPX), servizi WCF con risposta in formato JSON e XML, servizi REST ed, infine, attraverso un HTTP Handler generico. Per ogni tipo di servizio illustreremo la modalità di accesso via AJAX mediante jQuery. Il codice completo dell'applicazione è disponibile in allegato.