AJAX ASP-voorbeeld
AJAX wordt gebruikt om meer interactieve applicaties te maken.
AJAX ASP-voorbeeld
Het volgende voorbeeld laat zien hoe een webpagina kan communiceren met een webserver terwijl een gebruiker tekens typt in een invoerveld:
Voorbeeld
Start typing a name in the input field below:
Suggestions:
First name:
Voorbeeld uitgelegd
In het bovenstaande voorbeeld, wanneer een gebruiker een teken typt in het invoerveld, wordt een aangeroepen functie showHint()uitgevoerd.
De functie wordt geactiveerd door de onkeyupgebeurtenis.
Hier is de code:
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>
Code uitleg:
Controleer eerst of het invoerveld leeg is (str.length == 0). Als dit het geval is, wist u de inhoud van de tijdelijke aanduiding txtHint en verlaat u de functie.
Als het invoerveld echter niet leeg is, doet u het volgende:
- Een XMLHttpRequest-object maken
- Maak de functie die moet worden uitgevoerd wanneer de serverreactie gereed is
- Stuur het verzoek naar een ASP-bestand (gethint.asp) op de server
- Merk op dat de parameter q is toegevoegd gethint.asp?q="+str
- De variabele str bevat de inhoud van het invoerveld
Het ASP-bestand - "gethint.asp"
Het ASP-bestand controleert een reeks namen en retourneert de bijbehorende naam (namen) naar de 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
%>