ASP - AJAX och ASP

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

AJAX ASP-exempel

Nedanstående exempel visar hur en webbsida kommunicerar med en server när användaren skriver tecken i en inmatningsruta:

Exempel

Skriv in bokstäver (A - Z) i den nedre inmatningsrutan:

Namn:

Förslag:

Prova själv källkoden

Exempel förklaring - HTML-sida

När användaren skriver tecken i den övre inmatningsrutan, körs "showHint()"-funktionen. Denna funktion aktiveras av "onkeyup"-händelsen:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // För IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  // För 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>Var vänlig och ange engelska tecken i rutan:</b></p>
<form>
Förnamn: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Förslag: <span id="txtHint"></span></p>
</body>
</html>

Källkodsexempel:

Om inmatningsrutan är tom (str.length==0), kommer funktionen att tömma innehållet i placeholder txtHint och avsluta funktionen.

Om inmatningsrutan inte är tom, kommer showHint() att utföra följande steg:

  • Skapa ett XMLHttpRequest-objekt
  • Skapa en funktion som ska köras när serverns svar är klart
  • Skicka en förfrågan till filen på servern
  • Observera att parametern (q) som läggs till i slutet av URL:en (innehåller inmatningsrutan) måste läggas till.

ASP-fil

Detta JavaScript-anrop till serverns sida är en ASP-fil vid namn "gethint.asp".

"gethint.asp"-källkoden kommer att kontrollera namnarrayen och sedan returnera motsvarande namn till webbläsaren:

<%
response.expires=-1
dim a(30)
'Fyll arrayen med namn
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"
'Hämta parametern q från URL
q=ucase(request.querystring("q"))
'Om längden på q>0, sök alla ledtrådar i arrayen
om len(q)>0 då
  hint=""
  för i=1 till 30
    om q=ucase(mid(a(i),1,len(q))) då
      om hint="" då
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if
'Om ingen ledtråd hittas, skriv ut "no suggestion"
'eller outputa korrekta värden
om hint="" då
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

Källkodsexempel:

Om JavaScript skickar någon text (dvs strlen($q) är större än 0), inträffar följande:

  • Sök matchande namn från JavaScript
  • Om ingen match hittas, sätt svetssträngen till "no suggestion"
  • Om en eller flera matchande namn hittas, sätt svetssträngen till alla namn
  • Skicka svaret till placeholder "txtHint"