In questo capitolo vedremo una semplice applicazione pratica della tecnologia AJAX per creare il programma presentato nel capitolo precedente.
Per effettuare la nostrarichiesta asincrona al server usiamo il metodoopen() dell'oggettoXMLHttpRequest e inviamo successivamente la richiesta con il metodosend():
varajax=newAjax();varurl="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 variabileurl che contiene il nome dello script sul server che vogliamo richiamare.
Il metodoopen() prende come primo parametro il metodo di invio dei dati al server:GET permette di inviare i dati nellaquerystring mentrePOST 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 metodosend() 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 esempioscript.php?action=mostra&id=5.
readyStateLa proprietàreadyState indica lo stato della richiesta che abbiamo effettuato. Può assumere un valore da 0 a 4:
| 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. |
onreadystatechangeLa proprietàonreadystatechange dell'oggettoXMLHttpRequest serve per impostare una funzione da richiamare quando viene alterato il valore della proprietàreadyState. Ad esempio si può fare in questo modo:
functiongestisciAJAX(){//...}ajax.onreadystatechange=gestisciAJAX;//attenzione, non vanno le parentesi!//altro metodoajax.onreadystatechange=function(){//...}
In questo modo basterà effettuare un controllo per verificare se ilreadyState è uguale a 4 (la richiesta è stata cioè completata) e quindi leggere i dati del server tramite la proprietàresponseText:
varajax=newAjax();ajax.onreadystatechange=function(){if(ajax.readyState==4){//fai qualcosa...}}
statusAl 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 andatequi).
Ecco un esempio:
//la nostra solita funzione...ajax.onreadystatechange=function(){if(ajax.readyState==4){// verifico che la richiesta è finitaif(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}}}
Vediamo quindi il nostro esempio.
Di seguito è mostrato il codice PHP della paginatips.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 casualeecho$tips[$i];//restituisce un tip a caso
Creiamo quindi un pulsante e un div:
<divid="tip"></div><inputtype="button"onclick="mostraTip();"value="Mostra suggerimento"/>
Infine nel nostro JavaScript (ricordatevi prima di inizializzare l'oggetto XMLHttpRequest come abbiamo fatto nel capitolo precedente):
functionmostraTip(){//la nostra solita funzione...ajax.onreadystatechange=function(){if(ajax.readyState==4){if(ajax.status==200){// controllo che la richiesta sia avvenuta con successovarresp=ajax.responseText;//prende i dativartipDiv=document.getElementById('tip');//ottiene il divtipDiv.innerHTML=resp;//imposta il contenuto}else{vartipDiv=document.getElementById('tip');//ottiene il divvarerror='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).