Continuo il mio viaggio nello studio di Ajax.
Oggi ho guardato come comunicare con il server, via GET o POST, ottenendo il risultato senza dover ricaricare la pagina dando all’applicazione un forte effetto web 2.0.
L’esempio è fatto di una pagina getpost.html nella quale c’è un form in cui inserire il nome ed il cognome. Dopo di ciò facendo click su invia i parametri con GET si vedrà il risultato della pagina get.php nella parte Risposta Server senza avere un ricaricamento della pagina.La stessa cosa si ottiene con Invia i parametri via POST, con la differenza che questa volta il colloquio con il server avverrà via POST.
Vediamo un attimo il codice Javascript:
Il bottone GET chiama la funzione doRequestUsingGET();
<br />
function doRequestUsingGET()<br />
{<br />
createXMLHttpRequest();<br />
var queryString = "get.php?";<br />
queryString = queryString + createQueryString()<br />
+ "&timeStamp=" + new Date().getTime();<br />
xmlHttp.onreadystatechange = handleStateChange;<br />
xmlHttp.open("GET", queryString, true);<br />
xmlHttp.send(null);<br />
}<br />
La funzione crea un oggetto XMLHttpRequest, poi costruisce la stringa della Chiamata GET con i valori inseriti dall’utente utilizzando la funzione createQueryString():
<br />
function createQueryString()<br />
{<br />
var nome = document.getElementById("nome").value;<br />
var cognome = document.getElementById("cognome").value;<br />
var queryString = "nome=" + nome + "&cognome=" + cognome;<br />
return queryString;<br />
}<br />
Si continua impostando la proprietà onreadystatechange dell’oggetto XMLHttpRequest per l’uo della funzione handleStateChange. il metodo open() dice che la richiestà è di tipo GET, l’URL della richiesta con i valori e il metodo send() invia la richiesta al server. La risposta sarà gestita dalla funzione handleStateChange:
<br />
function handleStateChange()<br />
{<br />
if(xmlHttp.readyState == 4)<br />
{<br />
if(xmlHttp.status == 200)<br />
{<br />
parseResults();<br />
}<br />
}<br />
}<br />
Quest’ultima chiama la funzione parseResult():
function parseResults()<br />
{<br />
var responseDiv = document.getElementById("rispostaServer");<br />
if(responseDiv.hasChildNodes())<br />
{<br />
responseDiv.removeChild(responseDiv.childNodes[0]);<br />
}<br />
var responseText = document.createTextNode(xmlHttp.responseText);<br />
responseDiv.appendChild(responseText);<br />
}
Tale funzione usando il DOM rimuove i risultati precedenti del server dal DIV “rispostaServer” e ci va a mettere quelli nuovi.
Se invece si effettua tutto via POST, la differenza sta nella modalità in cui si inviano i parametri al server.
<br />
function doRequestUsingPOST()<br />
{<br />
createXMLHttpRequest();<br />
var url = "post.php";<br />
var queryString = createQueryString();<br />
xmlHttp.open("POST", url, true);<br />
xmlHttp.onreadystatechange = handleStateChange;<br />
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");<br />
xmlHttp.send(queryString);<br />
}<br />
La differenza è che i parametri andranno cercati all’interno del corpo della richiesta e non nell’url.
Per questo si usa il metodo setRequestHeader(), per dire al server che cerchi li i parametri.
Per completezza metto pure il codice delle pagine PHP:
*get.php
<br /> echo 'Ciao';<br /> echo ' Il tuo nome è: '.$_GET['nome'];<br /> echo ', il tuo cognome è: '.$_GET['cognome'];<br /> echo ' [Metodo GET]';<br />
post.php
<br />
echo 'Ciao';<br />
echo ' Il tuo nome è: '.$_POST['nome'];<br />
echo ', il tuo cognome è: '.$_POST['cognome'];<br />
echo ' [Metodo POST]';<br />
L’esempio è molto semplice, ma si può fare la stessa cosa, avendo un parte lato serve molto più complicata, il tutto mantenedo questo aspetto di applicazione Desktop per una applicazione Web.
Gabba Gabba Hey
Bonzo