Guida al linguaggio di Programmazione Ajax

Senza tanti preamboli vediamo subito che cosa è realmente Ajax.

• La capacità di Javascript di aggiornare parte di una pagina HTML senza che questa venga caricata nuovamente.
• La capacità di Javascript di fare richieste tramite il protocollo HTTP.

in pratica quando si parla di Ajax è l’acronimo di Asynchronous JavaScript And XML ed è una tecnologia che risale al 2005. Non si tratta di una nuova tecnologia né di un’invenzione bensì di un concetto utilizzato per sviluppare applicativi avanzati e particolari quali Gmail, Google Maps o Google Suggest. Il concetto è in parte espresso nell’acronimo scelto, un utilizzo asincrono di Javascript che attraverso l’interfacciamento con XML, può permettere ad un client di richiamare informazioni lato server in modo veloce e trasparente, allargando gli orizzonti delle rich internet applications.

In pratica questa nuova invenzione riguarda principalmente il linguaggio HTML che prima ne era sprovvisto , di fatto poi è stato utilizzato anche da tutte le altre tecnologie vedi Aspnet , ma piu’ per moda che per altro, dato che le stesse utilizzavano già le tecnologie alternative che permettevano di ottenere una comunicazione client server di tipo asincrono…

Ma vediamo piu’ in particolare su cosa si basa questa asincronia. Prima quando facevamo le normali pagine statistiche che di fatto si potevano fare anche in php, una volta che il server aveva caricato nel nostro browser la pagina questa di fatto era statica, anche se realizzata in php, in quanto per potere modificare i dati in essa presenti dovevamo ricaricare l’intera pagina senza possibilità di fare altrimenti, con questa nuova tecnologia Ajax è invece possibile ricaricare solamente alcuni dati della pagina senza la necessità di ricaricarla per intero. Quindi si perde la sincronia fra quello che richiediamo noi , ossia una pagina web e la comunicazione del server. Questo è in soldoni quello che accade, per darvi un esempio proprio esplicito possiamo parlarvi delle chat che una volta caricata la pagina, esse aggiornano la pagina stessa, prima con php era possibile farlo solamente ad istanti sincroni , ossia dopo determinati periodi di tempo prestabiliti, ora con Ajax l’aggiornamento avviene quando un utente immette un messaggio nella chat, cioè si perde totalmente la sincronia, dato che non è possibile stabilire esattamente quando un utente decide di immettere nuovamente un nuovo messaggio.

Facciamo un primo esempio, guardate questo messaggio

<script>
function script1() {
var e = document.getElementById(“pluto”);
e.innerHTML = “Benone!”;
}
</script>
<div id=”pluto”>
Ciao come stai?
</div>
<input type=”button” value=”Esegui esempio” onClick=”script1()” />

e provatelo

Ciao come stai?

Osserviamo il codice esempioe ad utilizzarlo (basta premere il bottone Esegui esempio). Alla pressione del bottone il contenuto dell’elemento DIV che ha come id pluto viene modificato da “Come stai” a “Benone!”. Guardando il codice si capisce subito che farlo è molto semplice, questa è la funzione script1 che viene richiamata alla pressione del pulsante:

XMLHttpRequest

La peculiarità di una pagina Ajax è il fatto che questa si aggiorna senza la necessità di essere ricaricata, o al contrario che un evento generato dall’utente (come ad esempio la pressione di un tasto) causi una operazione sul server, in parole molto povere con Ajax non abbiamo la necessità di utilizzare il Form di Html..Infatti con questa nuova tecnologia è Javascript che può contattare il server spedendo e ricevendo informazioni senza che la pagina venga ricaricata. Adesso vedremo come fa nello specifico, ossia introduciamo l’oggetto XMLHttpRequest, relativamente nuovo dovrebbe risalire al 2006 e che ormai ogni browser moderno dovrebbe avere acquisito, tutti tranne Internet Explorer che al momento in cui stiamo scrivendo questa guida ancora non ne dispone ma si sta attrezzando. Niente paura Ajax cmq funziona anche con IE basta aggiungere un po’ di codice in piu’ vedremo come fare dopo. Per il momento facciamo finta che anche IE Fz con Ajax senza problemi.

Per fare questo esempio dovremmo ovviamente utilizzare anche una tecnologia server, ed utilizzeremo la piu’ semplice in assoluto , anche perché’ come si dice in questi casi il PHP lo conosce anche mia Nonna che è esperta di tecniche di Maglia e Cucito.

function CreateXmlHttpReq(handler)

 {   

var xmlhttp = null;   

xmlhttp = new XMLHttpRequest();   

xmlhttp.onreadystatechange = handler;   

return xmlhttp; 

} 

l’abbiamo cioè come si dice in gergo inizializzata, ma spieghiamo un attimo cosa di fatto abbiamo fatto

La funzione CreateXmlHttpReq prende in ingresso un solo argomento, una funzione, questa verrà attivata solamente quando ci sarà la richiesta. . Detto piu’ in soldoni , Javascript è un linguaggio che per l’input/output utilizza un modello basato sugli eventi. Appena l’evento si verifica Javscript entra in azione chiamando l’handler (ovvero una funzione che gestisce l’evento) apposito. Viene effettuata la richiesta all’HTTP e si rimane in attesa che ci siano novità, vi chiederete come? Beh di fatto tramite XmlHttpRequest che ha in se’ una funzione che ci avvisa quando l’oggetto che è stato mandato è cambiato, ossia per noi vuol dire che è stato elaborata una risposta.

Vediamo adesso come associargli una determinata pagina per il rientro.

var myRequest = CreateXmlHttpReq(myHandler);

myRequest.open(“GET”,”primo.php”);

myRequest.send(null);

Come potete facilmente immaginare questo script non fa altro che caricare il nostro handler e spedire una richiesta http con destinazione server, il file che intendiamo raggiungere si chiamerà primo.php, e vogliamo spedire con il metodo GET le eventuali variabili ma che vediamo al passo successivo in questo caso non mandiamo. A questo punto la richiesta parte e verrà gestita dalla funzione myhandler

function myHandler()

{      if (myRequest.readyState == 4 && myRequest.status == 200)

{          alert(myRequest.responseText);      }  }

Come vedete facciamo il controllo quando la nostra variabile viene caricato il valore 4 in quanto è l’unico che a noi interessa, ma è possibile che tale variabile assuma i seguenti valori

• 0: uninitialized
• 1: loading
• 2: loaded
• 3: interactive
• 4: complete

Che sono di facile comprensione

0 quando la variabile myhandler non è stata inzializzata

1 quando sta caricando il valore o i valori nel server

2 quando li ha finiti di caricare

3 quando sta completando la risposta

4 quando l’ha completata

Quando il valore è 4 e l’HTTP assume il valore 200 ossia completato con risposta, ricorderete il codice 401 era non trovato, oppure il 403 risposta proibita etc. etc.

Mentre un esempio di file php presente sul server potrebbe essere

<?  echo(“Questi dati vengono dal PHP”);  ?>

e questo potrebbe essere un esempio al completo…

var myRequest = null;

function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}

function esempio3() {
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open(“GET”,”primo.php”);
myRequest.send(null);
}
</script>
<input type=”button” value=”Clicca per lanciare la richiesta” onClick=”esempio3()” />

del codice html, vi avevamo già fatto notare che questo cmq non potrebbe funzionare in caso di vecchie versione di Internet Explorer per i quali bisogna ricorrere ai seguenti accorgimenti.

var myRequest = null;

function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}

function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}

function esempio3() {
myRequest = CreateXmlHttpReq(myHandler);
myRequest.open(“GET”,”primo.php”);
myRequest.send(null);
}
</script>
<input type=”button” value=”Clicca per lanciare la richiesta” onClick=”esempio3()” />

per la verità ci sarebbe da tenere presente anche un altro aspetto, diciamo un altro problema ma per non entrare troppo nel tecnichese ve lo evitiamo.