ASP - AJAX met ASP

AJAX wordt gebruikt om applicaties met meer dynamiek te creëren.

AJAX ASP voorbeeld

Het volgende voorbeeld toont hoe de website communiceert met de server wanneer de gebruiker tekens invoert in het invoervak:

Voorbeeld

Voer a.u.b. letters (A - Z) in in het onderstaande invoervak:

Naam:

Aanbeveling:

Probeer het zelf met de broncode

Voorbeeld uitleg - HTML-pagina

Wanneer de gebruiker tekens invoert in het bovenstaande invoervak, wordt de functie "showHint()" uitgevoerd. Deze functie wordt geactiveerd door het "onkeyup"-evenement:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// Code voor IE7+, Firefox, Chrome, Opera, Safari}
  xmlhttp=new XMLHttpRequest();
  }
else
  {// Code voor IE6, IE5}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>Voer a.u.b. Engelse letters in het invoerveld in:</b></p>
<form>
Voornaam: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Aanbevelingen: <span id="txtHint"></span></p>
</body>
</html>

Broncode uitleg:

Als het invoerveld leeg is (str.length==0), wordt de inhoud van de placeholder txtHint geleegd en wordt de functie afgesloten.

Als het invoerveld niet leeg is, voert showHint() de volgende stappen uit:

  • Maak een XMLHttpRequest-object aan
  • Maak een functie aan die wordt uitgevoerd wanneer de serverreactie klaar is
  • Verzend een verzoek naar het bestand op de server
  • Let op bij het toevoegen van de parameter (q) aan het einde van de URL (bevat de inhoud van het invoerveld)

ASP-bestand

Dit JavaScript-aanroepingsbestand op de server heet "gethint.asp".

"gethint.asp" controleert de naamarray en stuurt vervolgens de overeenkomstige namen terug naar de browser:

<%
response.expires=-1
dim a(30)
'Vul array met namen
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"
'Parameter q verkrijgen van URL
q=ucase(request.querystring("q"))
'Als de lengte van q groter is dan 0, worden alle suggesties in de array gezocht
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 er geen suggestie is gevonden, wordt "geen suggestie" weergegeven
'of geef de juiste waarden weer
if hint="" then
  response.write("geen suggestie")
else
  response.write(hint)
end if
%>

Broncode uitleg:

Als JavaScript elk tekst stuurt (dat wil zeggen, als strlen($q) groter is dan 0), dan gebeurt er het volgende:

  • Zoek naar overeenkomende namen van de tekens die van JavaScript komen
  • Als er geen overeenkomende naam wordt gevonden, stel de reactie string in op "geen suggestie"
  • Als er een of meerdere overeenkomende namen worden gevonden, stel de reactie string in met alle namen
  • Stuur de reactie naar de placeholder "txtHint"