AJAX ASP Voorbeeld

AJAX wordt gebruikt om interactievere toepassingen te maken.

AJAX ASP Voorbeeld

Hier is een voorbeeld van hoe de webpagina met de webserver communiceert wanneer de gebruiker tekens invoert in het invoerveld:

Voorbeeld

Voer a.u.b. letters A-Z in in het onderstaande invoerveld:

Naam:

Zoek aanbevelingen:

Uitleg van het voorbeeld

In het bovenstaande voorbeeld wordt de functie "showHint()" aangeroepen wanneer de gebruiker tekens invoert in het invoerveld.

Deze functie wordt geactiveerd door het onkeyup-evenement.

Hier is de HTML-code:

Voorbeeld

<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>Typ alstublieft de letters A-Z in het onderstaande invoerveld:</b></p>
<form> 
Naam:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Zoekadvies:<span id="txtHint"></span></p>
</body>
</html>

Probeer het zelf uit

Code-exploratie:

Controleer eerst of het invoerveld leeg is (str.length == 0）；als dat zo is, leegmaken van de inhoud van de txtHint-placeholder en de functie verlaten.

Maar, als het invoerveld niet leeg is, voer dan het volgende uit:

  • Maak een XMLHttpRequest-object aan
  • Maak een functie aan die wordt uitgevoerd wanneer de server gereed is met het antwoord
  • Verstuur een verzoek naar de ASP-bestand (gethint.asp) op de server
  • Let op om de q parameter toe te voegen aan gethint.asp
  • De str variabele bewaart de inhoud van het invoerveld

ASP-bestand - "gethint.asp"

Deze ASP-bestand controleert de naamarray en stuurt vervolgens de bijbehorende naam terug naar de browser:

<%
 response.expires=-1
 dim a(32)
 Gebruik naam om array in te vullen
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"
 Haal parameter q op uit de URL
 q=ucase(request.querystring("q"))
 Bekijk alle hint in het array, is de lengte van q groter dan 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
 Als hint niet gevonden wordt, output "geen suggestie", of output de juiste waarde
 if hint="" then
   response.write("geen suggestie")
 else
   response.write(hint)
 end if
%>