Perchè AJAX

Il mondo dell'IT è dominato dalle regole del mercato. Seguendo questa legge, è facile immaginare che ci siano momenti in cui alcune tecniche vanno per la maggiore. Dopo periodi in cui XML serviva anche per prendere un caffè, che NHibernate veniva utilizzato anche per gestire una tabaccheria di periferia e altre mode ancora, questo è decisamente il momento in cui AJAX va per la maggiore.

Prima di passare al discorso tecnico, è bene spendere un pò di tempo per capire perché si ha bisogno di AJAX nelle applicazioni web di oggi ed in quelle del futuro. Quando si deve sviluppare una nuova applicazione, ci si trova davanti ad una scelta: crearne una Desktop o una Web.

Le applicazioni desktop sono le classiche applicazioni Windows, mentre quelle web sono quelle a cui si può accedere tramite browser. Le prime hanno il pregio di essere performanti, in quanto girano sulla macchina che le esegue, di offrire una grande livello di interazione e di essere tendenzialmente più semplici da realizzare. Per contro, queste applicazioni devono essere installate su ogni macchina con conseguenti problemi di aggiornamento e manutenzione.

Le applicazioni web superano gli svantaggi di distribuzione da cui sono affette quelle windows in quanto devono essere distribuite solo sul server che le esegue, ma per contro hanno una maggior difficoltà di realizzazione e, soprattutto, un livello di interazione inferiore rispetto alla controparte. Mentre per le applicazioni windows il problema della distribuzione è invalicabile, per quelle web il problema della lentezza e della bassa interattività può essere risolto. Infatti, al classico modello richiesta del browser => risposta del server, si può passare ad un meccanismo di richiesta => risposta con il trasporto dei soli dati. Il tutto senza eseguire il refresh completo della pagina ed il conseguente miglioramento dell'usabilità e delle performance. Tutto questo può accadere grazie all'approccio AJAX.

Per dare un'idea di come si possa sfruttare il tutto per fornire un miglior servizio all'utente finale, l'esempio più semplice è l'aggiornamento di due combo collegate Provincia-Comune. L'approccio standard prevede che, al cambio di provincia, venga fatto il postback della pagina, questa venga processata sul server e l'intero contenuto venga inviato al client con le seguenti conseguenze:

1. noioso refresh della pagina, perdita del focus e pagina che viene visualizzata dall'inizio (molto scomodo quando si ha una pagina molto lunga). Il secondo ed il terzo inconveniente sono facilmente risolvibili attraverso l'utilizzo di Javascript, ma il primo rimane comunque irrisolvibile. Con l'introduzione di ASP.NET, si è tentato di limitare il problema del refresh tramite la SmartNavigation, ma il tentativo è miseramente fallito a causa dell'invasività di questa tecnica;
2. perdita di tempo da parte dell'utente. Infatti, l'utente, per il semplice cambio di una provincia, deve veder ricaricare tutta la pagina e non solo la lista dei comuni;
3. perdita di interattività. Nel tempo che la pagina viene processata dal server, l'utente non ha un feedback su cosa stia succedendo (quest'interazione viene affidata al browser, ma non sempre è sufficiente);
4. perdita di performance. Invece che scambiare solo i dati, client e server si scambiano tutta la pagina aumentando la banda necessaria.

AJAX supera tutti questi limiti in quanto la pagina rimane lì e solo la combo con i comuni viene aggiornata con i dati inviati dal server. Inoltre, basta visualizzare un pannello che indica che un'operazione è in corso e nasconderlo quando l'operazione finisce per dare un miglior feedback. Infine, non essendoci postback, non ci sono problemi di posizionamento e di focus.

Partendo da questo esempio, è facile immaginare altri campi dove AJAX può tornare utile. Ad esempio, si può paginare ed ordinare una griglia, lanciare operazioni sul server ad intervalli regolari (Polling), creare funzioni di Master-Detail, ecc.

Cos'è AJAX

AJAX è un acronimo che sta per Asynchronous Javascript And Xml. In altre parole, AJAX è un pattern che sfrutta le tecnologie attualmente esistenti sul web (HTML, Javascript, CSS, XMLHttpRequest, ecc.) per effettuare richieste al server, in modalità asincrona, senza effettuare il postback completo dell'intera pagina.

Il cuore sta nell'oggetto XMLHttpRequest; quest'oggetto viene utilizzato dal javascript per invocare le operazioni sul server e ricevere la relativa risposta. L'XMLHttpRequest è stato introdotto da Microsoft, in IE, nel lontano 1998 per poter realizzare il servizio Outlook Web Access. Successivamente, viste le potenzialità, tutti i vendor si sono adoperati per fornirne un'implementazione all'interno dei propri browser.

Va notato che pur non essendoci uno standard dietro quest'oggetto, tutti i vendor hanno utilizzato la stessa interfaccia al fine di semplificarne l'uso; l'unica differenza tra la varie implementazioni sta nel fatto che IE non ha nel proprio DOM un oggetto XmlHttpRequest, ma utilizza un ActiveX esterno (con conseguente problema di sicurezza), mentre gli altri browser lo hanno integrato. Questa limitazione di IE è stata eliminata a partire dalla versione 7.

XMLHttpRequest

Come detto sopra, XMLHttpRequest è l'oggetto che stabilisce e gestisce la comunicazione tra client e server. Tutti gli innumerevoli framework per AJAX, che sono proliferati nell'ultimo periodo, astraggono l'utilizzo di quest'oggetto, pertanto non è strettamente necessario conoscerne i dettagli. Tuttavia, per comprendere a fondo AJAX, è bene partire dalle basi cioè dal funzionamento di una richiesta asincrona tramite XMLHttpRequest.

Prima di tutto bisogna istanziare l'oggetto XMLHttpRequest e a tal proposito occorre fare una prima considerazione. È già stato detto che IE utilizza un ActiveX mentre gli altri browser hanno l'oggetto integrato nel DOM; questo significa che la creazione dell'oggetto deve essere subordinata al browser su cui il codice viene eseguito.

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
}
else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

Javascript è un linguaggio a cui corrisponde uno standard ECMA, ma molti browser non rispettano questo standard o ne forniscono un'implementazione diversa. Questa situazione comporta una seria difficoltà nel creare applicazioni Cross-Browser. Tuttavia, con il passare del tempo, alcune feature vengono aggiunte o modificate. Questo comporta che un codice Cross-Browser non deve utilizzare un'API in base al tipo di browser, ma in base alle sue capacità. Il codice precedente dà una dimostrazione di questa tecnica; infatti, non si verifica se il browser sia IE o meno, ma quale tipo di supporto esso abbia per l'oggetto XMLHttpRequest. Se non si utilizzasse questa tecnica, un browser, che come IE usa l'ActiveX esterno, non utilizzerebbe l'oggetto in questione, ma cercherebbe di crearne uno dal DOM con conseguente errore.

Il passo successivo all'istanziazione è l'apertura del canale di comunicazione con il server.

xhr.open(method, url);

Con questo metodo il client stabilisce un contatto con il server. Il primo parametro indica il tipo di richiesta che il client effettua al server: GET, POST, ecc. Il secondo parametro stabilisce quale sia la pagina da invocare per ottenere i dati. Essendo un url, è possibile passare tutti i parametri necessari nel querystring e rintracciabili sul server con la classica sintassi Request.QueryString[“NomeParametro”]. Esempio: http://www.miosito.com/pagina.aspx?par1=a&par2=b.

Ora è tutto pronto per effettuare la richiesta. L'oggetto XMLHttpRequest effettua richieste asincrone ma, rispetto alla struttura asincrona che si è abituati a vedere nel Framework, non richiede un callback da invocare al momento in cui la richiesta ha finito di essere processata, ma un callback da invocare ad intervalli all'interno del quale si deve testare lo stato della richiesta.

try {
  xhr.onreadystatechange = ReadyStateChange;
  xhr.send(params);
}
catch (err) {
  alert(?errore?);
}

function ReadyStateChange() {
  if (xhr.readyState == 4) {
    if (xhr.status == 200 || xhr.status == 0) {
      alert(xhr.responseText);
    }
    else {
      alert(?errore?);
    }
  }
}