AJAX ASP


Innehållsförteckning

    Visa innehållsförteckning


AJAX används för att skapa mer interaktiva applikationer.


Exempel på AJAX ASP

Följande exempel visar hur en webbsida kan kommunicera med en webbserver medan en användare skriver tecken i ett inmatningsfält:

Exempel

Börja skriva ett namn i inmatningsfältet nedan:

Suggestions:

First name:


Exempel förklarat

I exemplet ovan, när en användare skriver ett tecken i inmatningsfältet, en funktion anropad showHint() exekveras.

Funktionen utlöses av händelsen onkeyup.

Här är koden:

Exempel

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

Prova själv →

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

Kodförklaring:

Kontrollera först om inmatningsfältet är tomt (str.length == 0). Om det är det, rensa innehållet i platshållaren txtHint och avsluta funktionen.

Men om inmatningsfältet inte är tomt, gör följande:

  • Skapa ett XMLHttpRequest-objekt

  • Skapa funktionen som ska köras när serversvaret är klart

  • Skicka förfrågan till en ASP-fil (gethint.asp) på servern

  • Lägg märke till att parametern q läggs till gethint.asp?q="+str

  • Variabeln str innehåller innehållet i inmatningsfältet



ASP-filen - "gethint.asp"

ASP-filen kontrollerar en uppsättning namn och returnerar motsvarande namn till webbläsare:

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