Esempio AJAX ASP
AJAX viene utilizzato per creare applicazioni più interattive.
Esempio AJAX ASP
L'esempio seguente dimostrerà come una pagina Web può comunicare con un server Web mentre un utente digita i caratteri in un campo di input:
Esempio
Start typing a name in the input field below:
Esempio spiegato
Nell'esempio sopra, quando un utente digita un carattere nel campo di input, viene eseguita una funzione chiamata "showHint()".
La funzione viene attivata dall'evento onkeyup.
Ecco il codice HTML:
Esempio
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Spiegazione del codice:
Innanzitutto, controlla se il campo di input è vuoto (str.length == 0). In tal caso, cancellare il contenuto del segnaposto txtHint e uscire dalla funzione.
Tuttavia, se il campo di input non è vuoto, procedere come segue:
- Creare un oggetto XMLHttpRequest
- Creare la funzione da eseguire quando la risposta del server è pronta
- Invia la richiesta a un file ASP (gethint.asp) sul server
- Si noti che il parametro q è stato aggiunto gethint.asp?q="+str
- La variabile str contiene il contenuto del campo di input
Il file ASP - "gethint.asp"
Il file ASP controlla una matrice di nomi e restituisce i nomi corrispondenti al browser:
<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>