AJAX

In informatica AJAX, acronimo di Asynchronous JavaScript and XML, è un insieme di tecniche e metodologie di sviluppo software per la realizzazione di applicazioni web interattive (Rich Internet Application), basandosi su uno scambio di dati in background fra web browser e server, consentendo così l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente.

AJAX è asincrona nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente. Normalmente le funzioni richiamate sono scritte con il linguaggio JavaScript. Tuttavia, e a dispetto del nome, l'uso di JavaScript e di XML non è obbligatorio, come non è detto che le richieste di caricamento debbano essere necessariamente asincrone.

Il termine AJAX è stato coniato nel 2005 da Jesse James Garrett.

Descrizione

Il modello convenzionale per un'applicazione Web rispetto a un'applicazione che utilizza Ajax

AJAX è una tecnica multi-piattaforma, utilizzabile cioè su molti sistemi operativi, architetture informatiche e browser web, ed esistono numerose implementazioni open source di librerie e framework.

La tecnica AJAX utilizza una combinazione di:

HTML (o XHTML) e CSS per il markup e lo stile;
DOM (Document Object Model) manipolato attraverso un linguaggio ECMAScript come JavaScript o JScript per mostrare le informazioni ed interagirvi;
l'oggetto XMLHttpRequest per l'interscambio asincrono dei dati tra il browser dell'utente e il web server. In alcuni framework AJAX e in certe situazioni, può essere usato un oggetto Iframe invece di XMLHttpRequest per scambiare i dati con il server e, in altre implementazioni, tag <script> aggiunti dinamicamente (JSON);
in genere viene usato XML come formato di scambio dei dati, anche se di fatto qualunque formato può essere utilizzato, incluso testo semplice, HTML preformattato, JSON e perfino EBML. Questi file sono solitamente generati dinamicamente da script lato server.

Come DHTML o LAMP, AJAX non è una tecnologia individuale, quanto piuttosto un gruppo di tecnologie utilizzate insieme.

Le applicazioni web che usano AJAX richiedono browser che supportano le tecnologie necessarie (quelle dell'elenco sopra). Questi browser includono: Firefox, Opera, Konqueror, Safari, Internet Explorer e Chrome. Tuttavia, per specifica, "Opera non supporta la formattazione degli oggetti XSL".

Confronto con applicazioni tradizionali

Le applicazioni web tradizionali consentono agli utenti di compilare moduli e, quando questi moduli vengono inviati, viene inviata una richiesta al web-server. Il web server agisce in base a ciò che è stato trasmesso dal modulo e risponde bloccando o mostrando una nuova pagina. Dato che molto codice HTML della prima pagina è identico a quello della seconda, viene sprecata moltissima banda. Dato che una richiesta fatta al web server deve essere trasmessa su ogni interazione con l'applicazione, il tempo di reazione dell'applicazione dipende dal tempo di reazione del web server. Questo comporta che l'interfaccia utente diventi molto più lenta di quanto potrebbe essere.

Le applicazioni AJAX, d'altra parte, possono inviare richieste al web server per ottenere solo i dati che sono necessari (generalmente usando SOAP e JavaScript per mostrare la risposta del server nel browser). Come risultato si ottengono applicazioni più veloci (dato che la quantità di dati interscambiati fra il browser ed il server si riduce). Anche il tempo di elaborazione da parte del web server si riduce poiché la maggior parte dei dati della richiesta sono già stati elaborati.

Un esempio concreto: molti siti usano le tabelle per visualizzare i dati. Per cambiare l'ordine di visualizzazione dei dati, con un'applicazione tradizionale l'utente dovrebbe cliccare un link nell'intestazione della tabella che invierebbe una richiesta al server per ricaricare la pagina con il nuovo ordine. Il web server allora invierebbe una nuova query SQL al database ordinando i dati come richiesto, la eseguirebbe, prenderebbe i dati e ricostruirebbe da zero la pagina web reinviandola integralmente all'utente. Usando le tecnologie AJAX, questo evento potrebbe preferibilmente essere eseguito con uno JavaScript lato client che genera dinamicamente una vista dei dati con DHTML.

Un altro esempio potrebbe essere la scelta di un nuovo nickname in fase di creazione di un account su un sito web, nel caso classico, se il nome che abbiamo scelto fosse già esistente, dovremmo compilare prima tutto il modulo ed accorgerci solo dopo aver atteso il caricamento della pagina di conferma che il nome è già esistente e dobbiamo cambiarlo, invece con AJAX può essere introdotto un controllo sull'evento onChange o addirittura OnKeyUp della casella di testo che ci può informare tempestivamente che il nome inserito non è valido, magari evidenziando il testo in rosso (CSS + JavaScript).

Pro e contro

Come per le applicazioni DHTML, anche le applicazioni AJAX devono essere testate su più browser per verificarne la compatibilità (librerie come Sarissa di SourceForge possono tuttavia essere di aiuto). Inoltre è richiesto che nel client sia attivato JavaScript. Il vantaggio di usare AJAX è la grande velocità alla quale un'applicazione risponde agli input dell'utente.

Un problema abbastanza degno di nota è che, senza l'adozione di adeguate contromisure, le applicazioni AJAX possono rendere non utilizzabile il tasto "indietro" del browser: con questo tipo di applicazioni, infatti, non si naviga da una pagina all'altra, ma si aggiorna di volta in volta una singola parte del medesimo documento. Proprio per questo i browser, che sono programmi orientati alla pagina, non hanno possibilità di risalire ad alcuna di tali versioni "intermedie". Google, nella sua Google Maps, ha sviluppato una possibile soluzione al problema: invece di usare XMLHttpRequest quando l'utente clicca sul pulsante di ricerca, il risultato della ricerca viene inviato in un iframe invisibile, dal quale le informazioni sono portate nella pagina visibile.

HTML5

Le ultime tecnologie HTML5 (non ancora totalmente supportate ovunque) che permettono di manipolare la cronologia del browser, hanno permesso di ovviare al problema dell'orientamento alla pagina. Questo utilizzo si svolge principalmente in 4 fasi:

Blocco dell'evento di refresh con un event.preventDefault()
Introduzione di una nuova entità nella cronologia tramite il metodo history.pushState(state_object, title, link)
Richiesta in AJAX
Handling dell'evento popstate

In ogni modo, un attento design delle applicazioni AJAX permette di risolvere in parte (talvolta tutti) questi aspetti negativi.

Ajax nello sviluppo di APP mobile

L'utilizzo di Ajax è stato rilevante per lo sviluppo di applicazioni ibride sviluppate con Apache Cordova. Questa caratteristica è data dal fatto che le pagine web (solitamente in html) per poter accedere e mostrare contenuti dinamici devono effettuare richieste asincrone con Ajax verso server remoti che usano spesso linguaggi lato server.

History API

Galleria d'immagini in un sito web. HTML5 History API integrato con Ajax, Ajax da solo e pagine diverse. Il risultato visivo per l'utente è lo stesso ma i metodi sono molto diversi.

History API HTML5 offre la possibilità di modificare l'URL di un sito Web senza un aggiornamento completo della pagina^[1]. Ciò è utile per caricare parti di una pagina con JavaScript in modo tale che il contenuto sia notevolmente diverso e garantisca un nuovo URL. Infatti molti progetti in Ajax come detto sopra (ad esempio le gallerie d'immagine^[2]) prevedono il cambiamento di interfaccia senza cambiare l'URL della pagina. Ciò vuol dire che l'utente non può usare il tasto "indietro" (o "avanti) del browser per navigare tra (ad esempio) le immagini di una galleria d'immagini creata in Ajax poiché tale tasto porterebbe l'utente alla pagina precedente della cronologia del browser e non all'immagine precedente della galleria (o la successiva in caso del tasto "avanti"). Con History API i tasti "avanti" e "indietro" del browser diventano utilizzabili per navigare (ad esempio) tra le immagini della galleria Ajax attraverso diversi URL (uno per immagine) senza ricaricare la pagina. Prima dell'arrivo di questa API l'unico modo per creare una galleria di immagini con un URL diverso per ogni immagine era creare una pagina diversa per ogni immagine evitando di utilizzare Ajax.

Esempio

Un esempio di una semplice richiesta Ajax utilizzando il metodo GET, scritto in JavaScript.

get-ajax-data.js:

// Questo è lo script lato client.

// Inizializza la richiesta HTTP. 
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');

// Traccia i cambiamenti di stato della richiesta. 
xhr.onreadystatechange = function () {
	var DONE = 4; // readyState 4 significa che la richiesta è stata eseguita.
	var OK = 200;// lo stato 200 è un ritorno riuscito. 
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // "Questo è l'output." 
		} else {
			console.log('Error: ' + xhr.status); // Si è verificato un errore durante la richiesta.
		}
	}
};

// Invia la richiesta a send-ajax-data.php 
xhr.send(null);

send-ajax-data.php:

<? php 
// Questo è lo script lato server.

// Imposta il tipo di contenuto. 
header ( 'Content-Type: text / plain' );

// Invia indietro i dati. 
echo "Questo è l'output." ; 
?>

La libreria jQuery permette di fare chiamate asincrone usando una sintassi più semplice rispetto alla quella dell'oggetto XMLHttpRequest. Per esempio:

// Questo è lo script lato client.

$.ajax({
	type: "get",
	url: "send-ajax-data.php",
	success: function (data) {
		console.log(data); // "Questo è l'output."
	},
	error: function (request) {
		console.log('Error: ' + request.status); // Si è verificato un errore durante la richiesta.
	}
});

Alternative ad Ajax

Con la nascita di HTML 5 e CSS 3 alcune possibilità come la creazione di gallerie d'immagini, effetti e menu a tendina sono fattibili senza l'utilizzo di Ajax e/o JQuery e/o JavaScript, cosa che con HTML 4 e CSS 2 era spesso impossibile fare^[3]^[4]^[5]^[6].

Esempi di UI Ajax

Menu Ajax
Lightbox Ajax
Galleria di immagini Ajax

Note

^ (EN) Using the HTML5 History API, su CSS-Tricks, 9 marzo 2015. URL consultato il 18 febbraio 2021 (archiviato il 12 marzo 2021).
^ (EN) 30 Scripts For Galleries, Slideshows and Lightboxes, su Smashing Magazine, 18 maggio 2007. URL consultato il 18 febbraio 2021 (archiviato il 5 febbraio 2021).
^ (EN) 5 things you can do with CSS instead of JavaScript, su LogRocket Blog, 29 ottobre 2019. URL consultato il 9 febbraio 2021 (archiviato il 2 febbraio 2021).
^ (EN) 49 CSS Galleries, su Free Frontend. URL consultato il 9 febbraio 2021 (archiviato il 6 febbraio 2021).
^ LiveCode - HTML5 - Calculator App Demo, su livecode.com. URL consultato il 9 febbraio 2021 (archiviato il 24 settembre 2019).
^ Andrea Pacchiarotti, Menù responsivo in HTML e CSS senza JavaScript e jQuery, su Andrea pacchiarotti. URL consultato il 9 febbraio 2021 (archiviato il 29 maggio 2021).

Voci correlate

AFLAX, Asynchronous Flash and XML.
Icefaces, Framework AJAX.
JQuery, opensource, libreria AJAX/DHTML.
Jamp, framework open source scritto in PHP e basato su AJAX.

Altri progetti

Wikibooks contiene testi o manuali sull'AJAX
Wikimedia Commons contiene immagini o altri file sull'AJAX

Collegamenti esterni

(EN) Ajax, su Enciclopedia Britannica, Encyclopædia Britannica, Inc.
(EN) Denis Howe, Ajax, in Free On-line Dictionary of Computing. Disponibile con licenza GFDL

AJAX Tools e Framework

ZK, a huge JAVA servlet AJAX opensource framework.
mootools, a super lightweight web2.0 JavaScript framework.
Dojo Toolkit, opensource, libreria AJAX/DHTML.
Prototype JavaScript Framework opensource, libreria AJAX/DHTML.
Rico, opensource JavaScript framework.
AA, opensource, AJAX Toolkit per PHP.
SAJAX. URL consultato il 27 aprile 2020 (archiviato dall'url originale il 13 novembre 2006), Simple AJAX toolkit per PHP.
DWR. URL consultato il 22 aprile 2007 (archiviato dall'url originale il 5 maggio 2007), opensource, libreria AJAX per Java.
Rialto. URL consultato il 3 settembre 2017 (archiviato dall'url originale il 5 settembre 2008), Rich Internet AppLication Toolkit.
XAJAX (archiviato dall'url originale il 15 marzo 2020), Classe php, licenza LGPL, per sviluppare applicazioni AJAX.
JavaScript SOAP Client. URL consultato il 12 ottobre 2006 (archiviato dall'url originale il 20 ottobre 2006), libreria gratuita per utilizzare AJAX invocando Web service.
AJAX ASP.NET, AJAX per il framework. NET di Microsoft.
jQuery4jsf AJAX faces. URL consultato il 6 novembre 2017 (archiviato dall'url originale il 31 luglio 2009), libreria AJAX per JavaServer Faces.
Google Web Toolkit. URL consultato il 3 febbraio 2018 (archiviato dall'url originale il 21 aprile 2010), libreria opensource AJAX.

Risorse

History API di HTML5 e la navigazione sul web - Artera, History API di HTML5 per l'utilizzo con AJAX.
(EN) Jesse James Garrett "AJAX: A New Approach to Web Applications". URL consultato il 3 settembre 2017 (archiviato dall'url originale il 7 novembre 2006), l'articolo originale del coniatore del termine.
AJAX:Iniziare (archiviato dall'url originale il 6 gennaio 2010). Breve introduzione ad AJAX presso il Mozilla Development Center.
(EN) AJAXian. URL consultato il 3 febbraio 2018 (archiviato dall'url originale il 17 febbraio 2007)..
(EN) AJAX Matters..
(EN) Ajax Patterns (archiviato dall'url originale il 2 luglio 2005)..
Guida completa AJAX in italiano (archiviato dall'url originale il 1º settembre 2006)..
openAJAX.it. URL consultato il 3 febbraio 2018 (archiviato dall'url originale il 2 aprile 2006). Documentazione in italiano sui Toolkit AJAX open source.
Tutorial, Articoli su AJAX..
(EN) AJAX Magazine. URL consultato il 23 luglio 2020 (archiviato dall'url originale il 28 aprile 2006)..
(EN) AJAX Tutorial. Get, post, text, XML.
Introduzione ad AJAX: richieste sincrone ed asincrone. su ArcadiA Club.
AJAX e ASP su ASP Center. URL consultato il 3 febbraio 2018 (archiviato dall'url originale il 2 febbraio 2007)..
(EN) AJAXnetbeans (archiviato dall'url originale il 23 aprile 2014). Questo è un progetto ospitato da java.net, con alcuni esempi AJAX pronti all'uso utilizzabili con Netbeans.
(EN) Mashup di vari blog su AJAX. URL consultato il 20 marzo 2007 (archiviato dall'url originale il 24 marzo 2007)..

Controllo di autorità	LCCN (EN) sh2006004062 · GND (DE) 7515401-8 · BNE (ES) XX559296 (data) · BNF (FR) cb15511178c (data) · J9U (EN, HE) 987007556721605171

Portale Internet: accedi alle voci di Wikipedia che trattano di internet

[1] (EN) Using the HTML5 History API, su CSS-Tricks, 9 marzo 2015. URL consultato il 18 febbraio 2021 (archiviato il 12 marzo 2021).

[2] (EN) 30 Scripts For Galleries, Slideshows and Lightboxes, su Smashing Magazine, 18 maggio 2007. URL consultato il 18 febbraio 2021 (archiviato il 5 febbraio 2021).

[:0-3] (EN) 5 things you can do with CSS instead of JavaScript, su LogRocket Blog, 29 ottobre 2019. URL consultato il 9 febbraio 2021 (archiviato il 2 febbraio 2021).

[4] (EN) 49 CSS Galleries, su Free Frontend. URL consultato il 9 febbraio 2021 (archiviato il 6 febbraio 2021).

[5] LiveCode - HTML5 - Calculator App Demo, su livecode.com. URL consultato il 9 febbraio 2021 (archiviato il 24 settembre 2019).

[6] Andrea Pacchiarotti, Menù responsivo in HTML e CSS senza JavaScript e jQuery, su Andrea pacchiarotti. URL consultato il 9 febbraio 2021 (archiviato il 29 maggio 2021).

[1]

[2]

[3]

[4]

[5]

[6]