AJAX ASP Voorbeeld
AJAX word gebruik om meer interaktiewe toepassings te skep.
AJAX ASP Voorbeeld
Die volgende voorbeeld sal demonstreer hoe 'n webblad met 'n webbediener kan kommunikeer terwyl 'n gebruiker karakters in 'n invoerveld tik:
Voorbeeld
Start typing a name in the input field below:
Suggestions:
First name:
Voorbeeld Verduidelik
In die voorbeeld hierbo, wanneer 'n gebruiker 'n karakter in die invoerveld tik, word 'n funksie genaamd showHint()uitgevoer.
Die funksie word deur die onkeyupgebeurtenis geaktiveer.
Hier is die kode:
Voorbeeld
<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>
Kode verduideliking:
Kyk eers of die invoerveld leeg is (str.length == 0). As dit is, maak die inhoud van die txtHint-plekhouer skoon en verlaat die funksie.
As die invoerveld egter nie leeg is nie, doen die volgende:
- Skep 'n XMLHttpRequest-objek
- Skep die funksie wat uitgevoer moet word wanneer die bedienerantwoord gereed is
- Stuur die versoek na 'n ASP-lêer (gethint.asp) op die bediener
- Let daarop dat q parameter bygevoeg word gethint.asp?q="+str
- Die str-veranderlike hou die inhoud van die invoerveld
Die ASP-lêer - "gethint.asp"
Die ASP-lêer kontroleer 'n verskeidenheid name en gee die ooreenstemmende naam(me) terug na die blaaier:
<%
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
%>