# JavaScript/Usare AJAX

JavaScript
Copertina Tutti i moduli · Sviluppo
* IntroduzioneJavaScript/Introduzione
* Il nostro primo programmaJavaScript/Il nostro primo programma
* Tipi di dati e variabiliJavaScript/Tipi di dati e variabili
* Operatori e castingJavaScript/Operatori e casting
* Le strutture di controllo
** SelezioneJavaScript/Selezione
** IterazioneJavaScript/Iterazione
* Funzioni definite dall'utenteJavaScript/Funzioni definite dall'utente
* Programmazione ad oggettiJavaScript/Oggetti
** Oggetto StringJavaScript/Oggetto String
** Oggetto MathJavaScript/Oggetto Math
** Oggetto DateJavaScript/Oggetto Date
** Oggetto ArrayJavaScript/Oggetto Array
* CookieJavaScript/Cookie
* TimerJavaScript/Timer
* L'oggetto windowJavaScript/BOM
** Gli eventi nel BOMJavaScript/Gli eventi nel BOM
** Oggetto documentJavaScript/Oggetto document
** Altri oggetti del BOMJavaScript/Altri oggetti del BOM
* Il Document Object ModelJavaScript/DOM
** Proprietà e metodiJavaScript/Proprietà e metodi del DOM
** Gli eventi nel DOMJavaScript/Gli eventi nel DOM
* Espressioni regolariJavaScript/Espressioni regolari
* AJAX
** Introduzione ad AJAXJavaScript/Introduzione ad AJAX
** Usare AJAXJavaScript/Usare AJAX
* Costruttori e prototipiJavaScript/Costruttori e prototipi
* AppendiceJavaScript/Appendice
* CreditiJavaScript/Crediti
Modifica il sommario
In questo capitolo vedremo una semplice applicazione pratica della tecnologia AJAX per creare il programma presentato nel capitolo precedente.

## Chiedere dati al server

Per effettuare la nostra richiesta asincrona al server usiamo il metodo open dell'oggetto XMLHttpRequest e inviamo successivamente la richiesta con il metodo send:
La prima riga crea un nuovo oggetto AJAX (richiede la funzione già creata); viene poi dichiarata una variabile url che contiene il nome dello script sul server che vogliamo richiamare.
Il metodo open prende come primo parametro il metodo di invio dei dati al server: GET permette di inviare i dati nella querystring mentre POST richiede un metodo più sofisticato che non sarà trattato in questa semplice introduzione ad AJAX; il secondo parametro è l'url della pagina che vogliamo richiamare e il terzo indica se vogliamo effettuare una richiesta asincrona (normalmente è impostato su true).
Il metodo send invia la richiesta creata; il parametro serve per l'invio dei dati con POST, quindi non lo trattiamo.
Nell'url è possibile anche impostare una querystring nel caso si usi il metodo GET, ad esempio script.php?action=mostra&id=5.

## Leggere i dati dal server
### La proprietà readyState

La proprietà readyState indica lo stato della richiesta che abbiamo effettuato. Può assumere un valore da 0 a 4:
Valori della proprietà readyState :
| Stato | Descrizione |
| 0 | La richiesta non è inizializzata |
| 1 | La richiesta è stata inizializzata |
| 2 | La richiesta è stata inviata |
| 3 | La richiesta è in elaborazione |
| 4 | La richiesta è completa, significa quindi che possiamo leggere i dati restituiti dal server. |

### La proprietà onreadystatechange

La proprietà onreadystatechange dell'oggetto XMLHttpRequest serve per impostare una funzione da richiamare quando viene alterato il valore della proprietà readyState. Ad esempio si può fare in questo modo:
In questo modo basterà effettuare un controllo per verificare se il readyState è uguale a 4 (la richiesta è stata cioè completata) e quindi leggere i dati del server tramite la proprietà responseText:

### La proprietà status

Al termine della richiesta AJAX viene restituito il codice di stato HTTP che dice se la richiesta è terminata in modo corretto o no (per una lista completa dei codici andate qui).
Ecco un esempio:

## Il nostro esempio

Vediamo quindi il nostro esempio. Di seguito è mostrato il codice PHP della pagina tips.php che restituisce ogni volta un suggerimento diverso:
Creiamo quindi un pulsante e un div:
Infine nel nostro JavaScript (ricordatevi prima di inizializzare l'oggetto XMLHttpRequest come abbiamo fatto nel capitolo precedente):
La proprietà innerHTML è molto comoda (anche se non è prevista dalle specifiche del W3C) in quanto permette di impostare il codice HTML contenuto in un elemento del DOM (nel nostro caso il div).