ASP.NET AJAX è il nome del nuovo framework rilasciato da Microsoft con l'obiettivo di fornire agli sviluppatori web nuovi strumenti per la creazione di applicazioni web che utilizzano AJAX (Asynchronous Javascript And XML), un pattern che consente di dialogare con il server web dietro le quinte (vale a dire inviando richieste HTTP in maniera asincrona) senza bisogno di utilizzare il classico meccanismo di ricaricamento dell'intera pagina. Il primo evidente vantaggio di questa tecnica è quello di velocizzare notevolmente il tempo di risposta dell'applicazione alle interazioni dell'utente (ad esempio, non c'è più bisogno di ricaricare l'intera pagina web dopo la pressione di un pulsante), ma anche quello di migliorare il look and feel dell'interfaccia utente (possiamo eliminare i fastidiosi lampeggiamenti della pagina dovuti al suo ricaricamento) e, cosa molto importante, possiamo aggregare in tempo reale dati provenienti da web server remoti (attraverso i web service) preservando le capacità di risposta della nostra interfaccia utente.

Per rendere possibile tutto questo, ASP.NET AJAX nasce come insieme di estensioni alla tecnologia ASP.NET (che consente lo sviluppo di pagine web dinamiche lato server) con l'intento di estendere le sue potenzialità anche al lato client di una applicazione web. Perciò ASP.NET AJAX comprende una libreria server (che contiene funzionalità quali il controllo UpdatePanel, un'implementazione del "proxy pattern" per i Web Service, gli Extender e molto altro), il cui scopo principale è quello di permettere ai controlli server di interfacciarsi con il vero cuore delle Extension, costituito da una libreria scritta in JavaScript e chiamata Microsoft Ajax Library.

In questo articolo esamineremo le funzionalità di base della Microsoft Ajax Library, a cominciare dal concetto di ciclo di vita lato client, per poi introdurre una delle peculiarità della libreria, ossia un insieme di classi (ebbene sì, la libreria consente anche di implementare classi e di definire namespace in Javascript) che consentono di invocare web service utilizzando Javascript. I semplici esempi che proporremo ci consentiranno anche di prendere confidenza con alcune funzioni di libreria dedicate alla interazione con il DOM di una pagina web.

Abilitare ASP.NET AJAX in una pagina web

Microsoft Ajax Library è una libreria scritta in JavaScript e composta da più file incapsulati nell'assembly System.Web.Extensions che viene aggiunto alla GAC (Global Assembly Cache) nel momento in cui ASP.NET AJAX viene installato. Gli script necessari vengono automaticamente caricati nella pagina non appena inseriamo il controllo ScriptManager.

<asp:ScriptManager ID="TheScriptManager" runat="server" />

Dato che ASP.NET AJAX richiede alcune modifiche al file di configurazione del sito web (il file web.config), è consigliabile iniziare a lavorare con il template per Visual Studio 2005 fornito insieme all'installer in modo da dover solamente creare una nuova pagina ASP.NET ed inserire lo ScriptManager per abilitare immediatamente le funzionalità della Microsoft Ajax Library.

Ciclo di vita lato client

Pensiamo per un attimo al modello che utilizziamo per programmare una normale pagina ASP.NET: abbiamo la nostra istanza Page che lancia una serie di eventi (ad esempio Init, Load, PreRender) e noi sviluppatori intercettiamo questi eventi per inserire il nostro codice. Una pagina ASP.NET contiene tipicamente controlli web (come Button, TextBox) che possono a loro volta lanciare eventi e che ci consentono di inserire codice in risposta agli input dell'utente (ad esempio, possiamo intercettare l'evento Click di un controllo Button per inserire un nuovo record in un database). Quello che utilizziamo è quindi un modello guidato dagli eventi (event-driven) perchè il nostro codice viene eseguito in risposta agli eventi lanciati dalla pagina e dai suoi controlli.

Sys.Application

Un modello simile a quello descritto viene introdotto lato client da ASP.NET AJAX. Al posto dell'istanza della classe Page abbiamo un oggetto chiamato Application, che è memorizzato nella variabile globale Sys.Application. Questo oggetto globale rappresenta sempre e comunque il nostro riferimento lato client, così come Page lo è dal lato server.

Un modello a tre fasi

Quando una pagina ASP.NET AJAX viene caricata dal browser (e più specificamente, quando viene sollevato l'evento window.load), parte l'inizializzazione del runtime Microsoft Ajax. L'oggetto Sys.Application lancia un evento chiamato init, che in genere viene utilizzato per istanziare componenti (che sono classi speciali definite da Microsoft Ajax, che per ora non ci interessano). Successivamente, quando tutti i componenti sono stati creati e il runtime ha completato l'inizializzazione, viene lanciato l'evento load: questo evento può essere intercettato semplicemente definendo nella pagina una funzione JavaScript chiamata pageLoad (questo deve essere il nome esatto) all'interno della quale possiamo inserire il codice client, in maniera simile a quanto facciamo lato server nel metodo Page_Load all'interno del file di codebehind. Infine, quando la pagina viene chiusa o ricaricata, Sys.Application lancia l'evento unload che ci consente di fare "pulizia" in modo da eliminare risorse e riferimenti utilizzati dal nostro codice JavaScript.

Alla luce di queste considerazioni, è possibile scrivere il codice da aggiungere ad una pagina ASP.NET per trasformarla nella più semplice pagina ASP.NET AJAX:

<asp:ScriptManager ID="TheScriptManager" runat="server" />

<script type="text/javascript">
<!--
  // Sottoscrivi l'evento init.
  Sys.Application.add_init(pageInit);

  function pageInit(sender, e) {
    alert("Stage init!");
  }

  function pageLoad(sender, e) {
    alert("Stage load!");
  }

  function pageUnload(sender, e) {
    alert("Stage unload!");
  }
//-->
</script>

Una volta eseguito questo semplicissimo codice, una message box ci informerà ogni qual volta una determinata fase del ciclo di vita viene raggiunta.

Vediamo di seguito quali possono essere alcuni dei vantaggi nell'utilizzo di questa struttura e del relativo modello ad eventi.

• Dato che stiamo usando un modello simile a quello usato lato server con ASP.NET, abbiamo già un'idea di base e una serie di "pattern" mentali acquisiti su come strutturare anche il codice client.
• Il modello di ciclo di vita consente di avere un posto "centralizzato" dove inserire il codice e permette di ottenere codice più ordinato e modulare anzichè di mischiare insieme Javascript e markup. Inoltre è possibile inserire gli script lato client in un file con estensione .js che può essere posto in cache dal browser al fine di evitare di richiederlo al server ad ogni caricamento. In più le dimensioni della pagina web diminuiscono.
• Il modello di ciclo di vita consente di definire le "locazioni" specifiche nelle quali effettuare l'inizializzazione ed il disposing degli oggetti client utilizzati nella pagina.