Exemple d'ASP AJAX
AJAX est utilisé pour créer des applications plus interactives.
Exemple d'ASP AJAX
L'exemple suivant montre comment une page Web peut communiquer avec un serveur Web pendant qu'un utilisateur tape des caractères dans un champ de saisie :
Exemple
Start typing a name in the input field below:
Suggestions:
First name:
Exemple expliqué
Dans l'exemple ci-dessus, lorsqu'un utilisateur tape un caractère dans le champ de saisie, une fonction appelée showHint()
est exécutée.
La fonction est déclenchée par l' onkeyup
événement.
Voici le code :
Exemple
<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xmlhttp.open("GET", "gethint.asp?q=" + str);
xmlhttp.send();
}
}
</script>
Explication du code :
Tout d'abord, vérifiez si le champ de saisie est vide (str.length == 0). Si c'est le cas, effacez le contenu de l'espace réservé txtHint et quittez la fonction.
Toutefois, si le champ de saisie n'est pas vide, procédez comme suit :
- Créer un objet XMLHttpRequest
- Créer la fonction à exécuter lorsque la réponse du serveur est prête
- Envoyez la demande vers un fichier ASP (gethint.asp) sur le serveur
- Notez que le paramètre q est ajouté gethint.asp?q="+str
- La variable str contient le contenu du champ de saisie
Le fichier ASP - "gethint.asp"
Le fichier ASP vérifie un tableau de noms et renvoie le ou les noms correspondants au navigateur :
<%
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
%>