JavaScript/Usare AJAX

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():

var ajax = newAjax();
var url = "script.php";

ajax.open("GET", url, true);
ajax.send(null);

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:

function gestisciAJAX () {
   //...
}

ajax.onreadystatechange = gestisciAJAX; //attenzione, non vanno le parentesi!

//altro metodo
ajax.onreadystatechange = function () {
   //...
}

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:

var ajax = newAjax();

ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) {
        //fai qualcosa...
    }
}

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:

//la nostra solita funzione...
ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) { // verifico che la richiesta è finita
        if( ajax.status == 200 ){ // controllo che la richiesta è terminata in modo corretto
              
              // codice da eseguire se la richiesta è andata a buon fine

        } else {

             // codice da eseguire se la richiesta ha restituito errore

        }
    }
}

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:

$tips = array( //inizializza i suggerimenti
    "Per aprire il menu, premi ALT+F!",
    "Ricordati di fare sempre un backup dei tuoi file importanti!"
    //altri suggerimenti...
);

$i = array_rand($tips); //un indice casuale
echo $tips[$i]; //restituisce un tip a caso

Creiamo quindi un pulsante e un div:

<div id="tip"></div>
<input type="button" onclick="mostraTip();" value="Mostra suggerimento" />

Infine nel nostro JavaScript (ricordatevi prima di inizializzare l'oggetto XMLHttpRequest come abbiamo fatto nel capitolo precedente):

function mostraTip() {
    //la nostra solita funzione...
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4) {
            if( ajax.status == 200 ){ // controllo che la richiesta sia avvenuta con successo
                 var resp = ajax.responseText; //prende i dati
                 var tipDiv = document.getElementById('tip'); //ottiene il div
                 tipDiv.innerHTML = resp; //imposta il contenuto
            } else {
                 var tipDiv = document.getElementById('tip'); //ottiene il div
                 var error = 'Errore la richiesta ajax non è avvenuta con successo' ;
                 tipDiv.innerHTML = error ; //imposta il contenuto di errore
             }
        }
    }


    ajax.open("GET", "tips.php", true);
    ajax.send(null);
}

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).