JavaScript AJAX

[ptm]

Cosa è?

Con il termine AJAX (Asynchronous JavaScript And XML) ci si riferisce ad un insieme di tecniche di sviluppo che sfruttano tecnologie web esistenti lato client per creare applicazioni asincrone. Mediante l'utilizzo di AJAX le pagine possono inviare e ricevere dati in modo asincrono senza interferire con il comportamento della pagina. Per esempio è possibile aggiornare il contenuto di una pagina senza la necessità di ricaricarla per intero. Nella figura sottostante è schematizzato il funzionamento di una pagina web che utilizza AJAX rispetto ad una pagina web convenzionale.

​

Nell'articolo che coniò il termine AJAX fu spiegato l'insieme delle tecnologie web su cui si sarebbe basato

• HTML (o XHTML) e CSS per la presentazione
• DOM (Document Object Model) per la visualizzazione dinamica e l'interazione con i dati
• XML per lo scambio dei dati
• L'oggetto XMLHttprequest per la comunicazione asincrona
• Javascript per far funzionare il tutto

Attualmente, a seguito dell'evoluzione delle tecnologie utilizzate nelle applicazioni AJAX, non è più richiesto l'utilizzo di XML per lo scambio di dati. Come alternativa viene spesso utilizzata la notazione JSON (Javascript Object Notation).


Come si usa?

Il funzionamento di base è abbastanza semplice e qui sotto vediamo un'implementazione

Perfavore, Entra oppure Registrati per vedere i codici!

In particolare onreadystatechange è un evento che si manifesta al cambiamento dello stato della richiesta AJAX. Esistono cinque readystate:

• 0: Richiesta non inizializzata
• 1: Stabilita connessione con il server
• 2: Richiesta ricevuta
• 3: Elaborazione richiesta
• 4: Richiesta terminata

Abbiamo inoltre diversi status che può restituire la richiesta tra cui ricordiamo:

• 200: Pagina trovata
• 404: Pagina non trovata
• 500: Errore server

Esempio

Supponiamo di voler realizzare una pagina con un bottone che, una volta premuto, mostra un messaggio alert con l'ora del server. Normalmente questo non potrebbe essere realizzato senza aggiornare la pagina per intero, ma con AJAX possiamo effettuare una richiesta asincrona come visto prima. Avremo quindi due pagina distinte:

• pagina.html cioè la pagina che effettua la richiesta AJAX e mostra i risultati
• hour.php che stampa semplicemente l'orario del server

hour.php

Perfavore, Entra oppure Registrati per vedere i codici!

pagina.html

Perfavore, Entra oppure Registrati per vedere i codici!

Cliccando sul bottone viene richiamata la funzione getHour() che si occupa di gestire la richiesta asincrona.
Questo è un esempio di base, ma spero riesca a mostrare alcune delle potenzialità di AJAX; i dati potrebbero provenire da un database, le richieste asincrone potrebbero essere fatte a cadenza regolare, le richieste AJAX potrebbero non partire necessariamente da un interazione con l'utente ecc.

N.B. alcune framework Javascript hanno già funzioni dedicate all'utilizzo di AJAX (per esempio JQuery). In futuro può darsi che questa guida verrà ampliata.

 

[chack1172]

Ottima guida come sempre @ptm
Io non ho mai usato direttamente AJAX, ma ho usato soltanto quello che mi offre jQuery per mandare richieste get/post e credo di iniziare ad ultizzarlo AJAX

 

[ptm]

Grazie!! Si, come ho riportato nel N.B. credo che in futuro aprirò qualche altra discussione sull'utilizzo di AJAX in JQuery ;)