Con questo articolo vogliamo farvi vedere come rendere un'applicazione web molto più user friendly. Come molti di voi sapranno, un'applicazione web dinamica si sviluppa su due livelli: Uno lato server e uno lato client. Il lato client, costituito dal vostro browser preferito (Internet explorer, Firefox, chrome, safari, ...), costituisce in una pagina html dove vi sono i controlli della nostra applicazione (come la form per la registrazione ad un sito/forum). Ovviamente le nostre pagine html saranno anche pagine di risposta in seguito ad una nostra richiesta al server (la form di registrazione nel nostro caso), o di soli contenuti. La parte server è costituita da un linguaggio di programmazione (nel nostro caso php) che si occupa di ricevere le nostre richieste e di elaborarle per poi rimandarle la risposta al client.
Il tutto, però, rendere la nostra applicazione web pesante, poichè la nostra richiesta conterrà l'intera pagina, non solo la parte interessata. Prendiamo in esempio le nostre applicazioni descktop. Come sappiamo, una volta che clicchiamo sul tasto di conferma viene modificata solo la parte contenente i nostri dati inseriti. Al contrario, l'applicazione web ricarica l'intera pagina, comportando un inutile spreco di tempo, nonchè un fastidioso refresh con relativa pagina bianca, cosa per niente non user friendly.
Ecco che quindi ci viene in aiuto Ajax. il termine Ajax è uscito per la prima volta nel 2005, e permette di ricaricare le nostre pagine solo nella parte interessata, senza quindi dover rimodificare l'intera struttura della pagina stessa, facendo uso di un particolare oggetto: XMLHttpRequest. Prima di procedere con un esempio pratico, vediamo schematicamente quali sono le varie fasi:
- Creazione di una semplice pagina html con casella a discesa con le lettere dell'alfabeto;
- invio di una richiesta ad una pagina Php allo scatenarsi dell'evento onChange sulla comboBox;
- tale richiesta verrà effettuata utilizzando l'oggetto XMLHttpRequest, permettendo così il caricamento della lista dei comuni senza il ricarico della pagina;
- la lista dei comuni verrà aggiornata utilizzando javascript e la funzione innerHtml.
Tutto ciò permette di non avere nessun reload della pagina, nessun precaricamento dei dati, scambio di messaggi tra client e server solo in realzione ai dati richiesti. Per fare ciò avremo bisogno di tre file:
- Il file contenente la form con la combo;
- un file javascript con le funzioni di output;
- un file php per la ricezione e l'elaborazione delle richieste e l'invio dei risultati.
Creiamo ora il nostro file contenente la form, di nome index.php.
<head>
<title>Articoli Programmazione 04</title>
<script language="javascript" type="text/javascript" src="/script/io.js"></script>
</head>
<body>
<div id="caselladiselezione">
<form id="formdiselezione" name="formdiselezione" method="Get">
<select onchange="selector()" id="opzioni">
<option value="1">Fiat</option>
<option value="2">Ford</option>
<option value="3">Ferrari</option>
</form>
</div>
<div id="lista">
</div>
</body>
</html>
Come si può notare è stato inserito un file javascript, il quale si occuperà di contenere, appunto, tutti quei metodi che si occuperanno di inviare le nostre richieste al server e di riceverle per poi inserirle all'interno della nostra pagina. Inoltre è presente la funzione selector nell'evento onchange della combo. Questa funzione è appunto presente nel nostro file javascript. Ecco il codice
{
var richiesta;
var browser = navigator.appname;
if (browser == "Microsoft Internet Explorer"){
richiesta = new ActiveXObject ("Microsoft.XMLHTTP");
else
richiesta = new XMLHttpRequest;
return richiesta;
}
var http = creaOggetto();
function selector()
{
http.open ('get', 'process.php?lettera='+document.formdiselezione.opzioni.options[document.formdiselezione.opzioni.selectedIndex].value);
http.onreadystatechange = function()
{
if (http.readyState == 4)
{
var response = http.responseText;
document.getElementById('lista').innerHtml = response;
}
}
http.send(null);
}
La funzione creaOggetto si occupa, in base al browser, di creare l'oggetto XMLHttpRequest, il quale verrà utilizzato successivamente per inviare alla nostra pagina php il risultato della selezione. La funzione selector è quella funzione scatenata al cambiamento della selezione, la quale invia, tramite un parametro get, il valore scelto nella combo. Tale funzione, tramite l'oggetto XMLHttpRequest, apre un "tunnel" invisibile agli utenti che conterrà i risultati delle richieste da noi scaturite. Tali risultati vengono catturati dalla funzione gestisciContenuto, la quale scriverà all'interno del div il risultato della selezione effettuata.
Come si può notare viene utilizzata la variabile readyState del nostro oggetto, la quale contiene gli stati della nostra richiesta:
1 = Loading
2 = Loaded
3 = Interactive
4 = Finished
Ovviamente noi utilizziamo l'indice 4 poichè la scrittura del risultato va effettuata una volta che la richiesta è giunta al termine, poichè è in questo momento che è presente la nostra risposta.
Creiamo ora il nostro file process.php
switch ($_GET['lettera'])
{
case 1:
echo ("Panda<br>");
echo ("Punto<br>");
echo ("500<br>");
break;
case 2:
echo ("Fiesta<br>");
echo ("Focus");
break;
case 3:
echo ("non disponibile<br>");
break;
default: echo ("");
}
?>
Conclusioni
Ajax è uno strumento interessante e potente che migliora lo scambio dei dati tra client e server. In questo articolo abbiamo accompagnato Ajax al lingiaggio php, ma in verità è possibile utilizzarlo con qualsiasi linguaggio, poichè è un oggetto integrato nel browser tramite ActiveX nel caso di explorer, e come oggetto nativo nel caso di tutti gli altri browser. Tale procedura, però, anche se ottimizza lo scambio dei dati tra client e sever, appesantisce le nostre pagine a causa del codice javascrip, necessario per compiere il tutto. nonostante tutto i vantaggi in termini di prestazioni ci sembrano innegabili in confronto a ciò che è stato detto sopra.
