Loading AI tools
tecnica di sviluppo software Da Wikipedia, l'enciclopedia libera
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.
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:
<script> aggiunti dinamicamente (JSON);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".
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).
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.
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:
In ogni modo, un attento design delle applicazioni AJAX permette di risolvere in parte (talvolta tutti) questi aspetti negativi.
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 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.
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.
}
});
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].
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
