Sconti Amazon
sabato 12 settembre 2009 di 19849 Letture

I concetti di base per sviluppare applicazioni Ajax

Un'importante proprietà dell'oggetto XMLHttpRequest è onreadystatechange. Essa consente di gestire i dati ricevuti in risposta da parte del server web. Abbinando l'utilizzo della proprietà con readyState, è possibile innanzi tutto stabilire se la comunicazione è andata o meno a buon fine. Nel caso in cui il valore della proprietà readyState, associata all'oggetto XMLHttpRequest, assuma il valore “4”, significa che la richiesta è stata completata con successo.

La proprietà responseText consentirà, successivamente, di leggere la risposta vera e propria fornita dal server.

Ecco come si presenta il codice finale, lato client:

<html>
<body>

<script type="text/javascript">
function chiamaAjax()
{
var xmlhttp;
if (window.XMLHttpRequest)
   {
   // codice valido per IE7 e succ., Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
else if (window.ActiveXObject)
   {
   // codice valido per IE6 e IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
else
   {
   alert("Il browser non supporta XMLHTTP");
   }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
   {
   document.getElementById('frasè).innerHTML=xmlhttp.responseText;
   }
}
xmlhttp.open("GET","ajaxserver.asp",true);
xmlhttp.send(null);
}
</script>

<form name="miomodulo">
<img src="immagine.gif" border="0" onclick="chiamaAjax();" />
</form>

<div id="frase"></div>

</body>
</html>

Il codice dovrà essere salvato sotto forma di file html sul sistema locale (esempio: ajaxclient.html).

La tag <div> funge da “segnaposto”: all'interno di essa verrà inserito il testo ricevuto come risposta dal server web. L'operazione si concretizza con una semplice istruzione JavaScript: document.getElementById('frasè).innerHTML=xmlhttp.responseText;

Preparazione di una pagina dinamica lato server

La pagina ajaxserver.asp è una semplice pagina dinamica ASP. Ovviamente, lato server, sarà possibile ricorrere a qualunque linguaggio di scripting, ad esempio PHP.

<%
Response.Expires=-1
Dim massimo,minimo
Dim risultato
minimo=1
massimo=12
Randomize
risultato=Int((massimo-minimo+1)*Rnd+minimo)

select case risultato
   case 1
      frase="Tanto va la gatta al lardo che ci lascia lo zampino"
   case 2
      frase="Chi semina vento raccoglie tempesta"
   case 3
      frase="Chi ha tempo non aspetti tempo"
   case 4
      frase="Batti il ferro finch&eacute; &egrave; caldo"
   case 5
      frase="A buon intenditor poche parole"
   case 6
      frase="Chi dorme non piglia pesci"
   case 7
      frase="Chi la dura la vince"
   case 8
      frase="Chi trova un amico trova un tesoro"
   case 9
      frase="Chi va con lo zoppo impara a zoppicare"
   case 10
      frase="Chi va per uccellar resta uccellato"
   case 11
      frase="Dire a nuora perch&acute; suocera intenda"
   case 12
      frase="Impara l'arte e mettila da parte"
end select

Response.Write(frase)
%>

Lo script ASP lato server è banale: viene generato casualmente un numero tra 1 e 12 quindi viene visualizzato il detto popolare corrispondente.

Salvando su un server web IIS le due pagine ajaxserver.asp e ajaxclient.html quindi richiamando da browser il secondo file, si noterà come i proverbi vengano visualizzati ad ogni clic sull'immagine senza che sia effettuato alcun reload della pagina web.

Insieme ai file ajaxserver.asp e ajaxclient.html dovrà essere memorizzato anche un file d'immagine, in formato gif, con il nome di ajaxserver.asp e immagine.gif.

Recuperare informazioni da una base dati

Come già evidenziato in precedenza, nello scrivere il codice della funzione JavaScript chiamaAjax(), abbiamo usato il metodo GET per l'invio della richiesta al server. Nel semplice esempio illustrato, il server selezionava a caso un detto popolare tra quelli indicati e lo “stampava” sulla pagina. La pagina dinamica lato server è invece solitamente, com'è ovvio, più “intelligente” ossia restituisce un risultato, sulla base della specifica richiesta ricevuta dal client. Tipicamente, inoltre, il server – ottenuti dal sistema client (il browser dell'utente collegato) uno o più parametri in ingresso – effettua una interrogazione all'interno di una base dati. A questo punto, dopo aver selezionato i valori d'interesse, invia il risultato dell'operazione al client.

Supponiamo che sul server sia memorizzato un database (tralasciamo i dettagli sul formato) che contenga i dati per la gestione di un'attività commerciale. La base dati ospita le informazioni circa gli acquisti effettuati dai vari clienti. Ipotizziamo, ancora, di volere fare in modo che vengano visualizzati gli acquisti effettuati da un cliente identificato con un certo ID. La pagina dinamica lato server (nel nostro caso, ajaxserver.asp) deve ricevere in ingresso l'ID del cliente e restituire l'elenco degli acquisti effettuati.

La richiesta GET effettuata mediante JavaScript diventerà qualcosa di simile:
xmlhttp.open("GET","ajaxserver.asp?id="+idcliente,true);
ove idcliente è una variabile contenente l'ID del cliente.

La realizzazione di una chiamata POST è leggermente diversa. In questo caso, è necessario fare utilizzo degli headers (setRequestHeader):

xmlhttp.open("GET","ajaxserver.asp",true);
xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xmlhttp.send("id="+idcliente);

Nel corso dei prossimi appuntamenti approfondiremo, sempre per esempi, l'utilizzo di AJAX. Vedremo, in particolare, come sia possibile gestire eventuali problematiche legate all'irraggiungibilità del server ed all'elaborazione di dati strutturati in forma più complessa (lettura di documenti XML).


Buoni regalo Amazon
I concetti di base per sviluppare applicazioni Ajax - IlSoftware.it - pag. 2