Applicazioni AJAX evolute 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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Migrare una service connection a workload identity federation in Azure DevOps
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Inizializzare i container in Azure Container Apps
Eseguire operazioni con timeout in React
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Evitare la command injection in un workflow di GitHub
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Copiare automaticamente le secret tra più repository di GitHub
Implementare l'infinite scroll con QuickGrid in Blazor Server
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Generare file per il download da Blazor WebAssembly
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Top Ten Articoli
- Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Utilizzare scene 3D in Windows Presentation Foundation
di Marco Leoncini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Ottimizzazione dei block template in Angular 17
- Utilizzare il trigger SQL con le Azure Function
- Paginare i risultati con QuickGrid in Blazor
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions
- Definire stili a livello di libreria in Angular