Applicazioni AJAX evolute in HTML5

Matteo Casati

di , in HTML5,

XMLHttpRequest è stato introdotto da Microsoft nel 1999 per consentire alla versione web di Outlook (Outlook Web Access, OWA) di avere un'interfaccia utente dinamica, il più simile possibile alla versione nativa del client di posta della suite Office.

XMLHttpRequest era parte integrante di Internet Explorer 5 come componente ActiveX (MSXML). Nel 2002 anche Mozilla Foundation incluse nel suo browser un oggetto compatibile con Microsoft XMLHttpRequest, rendendo di fatto possibile la realizzazione di applicazioni JavaScript in grado di scambiare dati con il server senza dover ricaricare interamente la pagina su più piattaforme.

Le origini di AJAX

Nel 2004 Google lanciò sul mercato Gmail, un'applicazione gratuita per la gestione di una casella email, compatibile con più browser e con logiche di interazione simili a quelle della versione web di Outlook. In seguito XMLHttpRequest venne adottato in diverse applicazioni, come ad esempio Google Suggest, rivoluzionando l'esperienza utente in ambito web. Gli indubbi vantaggi di questa tecnica ne hanno decretato il successo e la diffusione, tanto che, nel 2005, Jesse James Garrett coniò un termine specifico per definire questo nuovo paradigma: AJAX, acronimo di Asynchronous JavaScript XML(HttpRequest). Nel 2006 il W3C definì un apposito gruppo di lavoro per la standardizzazione delle API di XMLHttpRequest così da garantire la compatibilità tra le implementazione dei diversi browser.

Il listato 1 mostra il codice necessario per effettuare una chiamata al Web Server in modo asincrono.

Listato 1 - Utilizzo di XMLHttpRequest
function getXMLHttpRequest()
{
  if (window.XMLHttpRequest)
    return new XMLHttpRequest();

  // non nativo (IE<7):
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
  catch (e) { }
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
  catch (e) { }
  try { return new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { }
  throw new Error("Il browser non supporta XMLHttpRequest");
}

var url = document.location;
var request = getXMLHttpRequest();
request.open("GET", url, true);
request.onreadystatechange = function ()
{
  if (request.readyState == 4)
  {
    alert(request.responseText);
  }
}
request.send(null);

La funzione getXMLHttpRequest nell'esempio precedente verifica che il browser supporti XMLHttpRequest nativamente, cercando eventualmente di utilizzare il componente ActiveX per mantenere la compatibilità con le vecchie versioni di Internet Explorer (precedenti a IE7). Il resto del codice è molto semplice: viene creata una nuova istanza di XMLHttpRequest, aperta una connessione asincrona verso l'indirizzo desiderato specificando il metodo HTTP da usare (nell'esempio "GET") e, intercettando l'evento onreadystatechange, si definisce l'azione di callback da eseguire una volta ricevuta la risposta dal server (nell'esempio del listato 1 viene semplicemente visualizzata la proprietà responseText in un alert di sistema). L'ultima riga invoca il metodo send per avviare la chiamata vera e propria.

La prima versione di XMLHttpRequest pone però alcuni vincoli al suo utilizzo in scenari più complessi. Ad esempio non possiamo utilizzare XMLHttpRequest per effettuare l'upload di file o per chiamare pagine e servizi presenti in un dominio diverso da quello della pagina. Fino ad ora, in questi casi, si è fatto ricorso a workaround per aggirare queste limitazioni, ad esempio usando iframe nascosti o caricando programmaticamente degli script esterni.

Alla luce di queste limitazioni, presso il W3C Web Applications Working Group, sono in via di definizione le specifiche della seconda versione di XMLHttpRequest (XMLHttpRequest 2 o XHR2) che, tra l'altro, permette di effettuare richieste cross-origin, fornisce eventi per gestire lo stato di avanzamento della richiesta e la gestione di stream di byte sia in invio che in ricezione.

Di seguito esaminiamo alcune delle caratteristiche più interessanti introdotte dalle nuove specifiche.

Contenuti dell'articolo

Commenti

Applicazioni AJAX evolute in HTML5 1010 8
| Condividi su: Twitter, Facebook, LinkedIn, Google+

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I tutorial
Top Ten Articoli
Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

Iscrivi subito! »»»

In primo piano

I più letti di oggi

Media
In evidenza
MISC