AJAX ASP

Indholdsfortegnelse

    Vis indholdsfortegnelse

AJAX bruges til at skabe mere interaktive applikationer.

Eksempel på AJAX ASP

Følgende eksempel vil demonstrere, hvordan en webside kan kommunikere med en webserver, mens en bruger skriver tegn i et inputfelt:

Eksempel

Begynd at skrive et navn i indtastningsfeltet nedenfor:

Suggestions:

First name:

Eksempel forklaret

I eksemplet ovenfor, når en bruger indtaster et tegn i inputfeltet, en funktion kaldet showHint() udføres.

Funktionen udløses af hændelsen onkeyup.

Her er koden:

Eksempel

<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>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<h3>Start typing a name in the input field below:</h3>

<p>Suggestions: <span id="txtHint"></span></p> 
<p>First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>

<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "gethint.asp?q="+str);
  xhttp.send();
}
</script>

</body>
</html>

Kodeforklaring:

Tjek først om indtastningsfeltet er tomt (str.length == 0). Hvis det er, skal du rydde indholdet af txtHint-pladsholderen og forlad funktionen.

Men hvis indtastningsfeltet ikke er tomt, skal du gøre følgende:

  • Opret et XMLHttpRequest-objekt

  • Opret den funktion, der skal udføres, når serversvaret er klar

  • Send anmodningen til en ASP-fil (gethint.asp) på serveren

  • Bemærk at parameteren q er tilføjet gethint.asp?q="+str

  • Str-variablen indeholder indholdet af inputfeltet

ASP-filen - "gethint.asp"

ASP-filen kontrollerer en række navne og returnerer det eller de tilsvarende navne til 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
%>