Analisi di una richiesta HTTP

In questo secondo tutorial AJAX analizzeremo in con esempio la richiesta HTTP in Javascript al server su cui sarà attivo un programma in PHP.
In particolare di seguito vedremo come fare una richiesta HTTP in JavaScript al webserver, nel prossimo tutorial analizzeremo il codice php che bisogna scrivere per interagire con la richiesta.

Illustriamo di seguito un esempio AJAX nel quale una pagina web comunica con un web server online quando l'utente inserisce dati nel form.
In particolare questa applicazione web gestisce un autocompletamento dell'input.
In pratica mentre l'utente scrive nel form, l'applicazione dialoga in tempo reale con il server dando suggerimenti all'utente.

Spiegazione dell'esempio : Il Form HTML

<form> 
First Name:
<input type="text" id="txt"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p> 

Per quanto riguarda la parte di presentazione è molto semplice, si tratta di un form html che riceve in input un campo chiamato "txt".
I tasti premuti, per mezzo del gestore di eventi onKeyUp legato al tag INPUT, attivano la funzione showHint() che elabora i dati inseriti nel form (tramite questa funzione faccio delle richieste "indirette al server - capirete meglio di seguito) e restituisce i risultati.
Nota che ad ogni pressione viene chiamata showHint() e gli vengono passati tutti i caratteri scritti fino a quel momento. (per ulteriori chiarimenti fate riferimento ai tutorial :
onKeyUp e onKeyDown: due gestori di eventi per il tag INPUT e Controllare quale tasto è stato premuto sulla tastiera )

Successivamente per mezzo dello "span id=txtHint" si visualizza la risposta del server.

Spiegazione dell'esempio

Le funzioni che vedremo di seguito rappresentano un modo classico di fare una richiesta HTTP mediante JavaScript. Questo argomento è trattato anche in un tutorial Javascript (vedi Fare una richiesta HTTP con JavaScript).

Il codice Javascript per la richiesta HTTP

Come funziona?

Se c'è un input nel campo txt viene richiamata, come abbiamo già visto, la funzione showhint() che a sua volta richiama altre funzioni per gestire opportunamente la richiesta.
Le funzioni di seguito si occupano di:

var xmlHttp

function showHint(str)
{ 
if (str.length > 0)
{ 
var url="suggerisci.php?sid=" + Math.random() 
                 + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
} 
else
{ 
document.getElementById("txtHint").innerHTML=""
} 
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState
                                =="complete")
{ 
document.getElementById("txtHint").innerHTML
                                     =xmlHttp.responseText 
} 
} 

function GetXmlHttpObject(handler)
{ 
var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera") 
return; 
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{ 
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
} 
try
{ 
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler 
return objXmlHttp
} 
catch(e)
{ 
alert("Error. Scripting for ActiveX might be disabled") 
return 
} 
} 
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler 
return objXmlHttp
}
} 

Per approfondire il funzionamento del codice sopra leggete Fare una richiesta HTTP con JavaScript

In questo tutorial abbiamo visto come dare la possibilità all'utente di dialogare indirettamente (per mezzo di javascript) con il server. Ora l'aspetto da vedere è come costruire un programma che operi lato server, che elabori le richiste provenienti dall'utente e restituisca i risultati. Nel prossimo tutorial studieremo il programma php (se conoscete asp potrete riscriverlo in asp, non sarà difficile) che elabora la richiesta che abbiamo fatto e risponde.