ASP - AJAX und ASP

AJAX wird verwendet, um Anwendungen mit höherer Dynamik zu erstellen.

AJAX ASP Beispiel

Nachfolgend wird gezeigt, wie eine Webseite mit dem Server kommuniziert, wenn der Benutzer Zeichen im Eingabefeld eingibt:

Beispiel

Geben Sie bitte die Buchstaben (A - Z) im folgenden Eingabefeld ein:

Name:

Empfehlung:

Probieren Sie den Quellcode selbst aus

Beispielinterpretation - HTML-Seite

Wenn der Benutzer Zeichen im oberen Eingabefeld eingibt, wird die Funktion "showHint()" ausgeführt. Diese Funktion wird durch das "onkeyup"-Ereignis ausgelöst:

<!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>Bitte geben Sie englische Zeichen im Eingabefeld ein:</b></p>
<form>
Vornamen: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Vorschläge: <span id="txtHint"></span></p>
</body>
</html>

Quellcode-Explainierung:

Falls das Eingabefeld leer ist (str.length==0), leert die Funktion den Inhalt des Placeholders txtHint und verlässt die Funktion.

Falls das Eingabefeld nicht leer ist, führt showHint() die folgenden Schritte aus:

  • Ein XMLHttpRequest-Objekt erstellen
  • Eine Funktion erstellen, die beim Bereitsein der Serverantwort ausgeführt wird
  • Eine Anfrage an die Datei auf dem Server senden
  • Bitte beachten Sie die Parameter (q) am Ende der URL hinzufügen (enthalten den Inhalt des Eingabefelds)

ASP-Datei

Diese vom JavaScript aufgerufene Serverseite ist eine ASP-Datei namens "gethint.asp".

"gethint.asp" überprüft den Namensarray und gibt die entsprechenden Namen an den Browser zurück:

<%
response.expires=-1
dim a(30)
'Füllen Sie das Array mit Namen auf'
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"
'Erhalten Sie den Parameter q aus der URL'
q=ucase(request.querystring("q"))
'Wenn die Länge q>0, dann suchen Sie alle Hinweise im Array'
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
'Wenn keine Hinweise gefunden werden, wird "no suggestion" ausgegeben'
'oder geben Sie die richtigen Werte aus
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

Quellcode-Explainierung:

Wenn JavaScript jeden Text sendet (d.h. strlen($q) größer als 0), dann tritt folgendes ein:

  • Finden Sie Übereinstimmungen der aus JavaScript kommenden Zeichen im Namen
  • Falls keine Übereinstimmung gefunden wird, wird die Antwortzeichenkette auf "no suggestion" gesetzt
  • Falls ein oder mehrere übereinstimmende Namen gefunden werden, wird die Antwortzeichenkette mit allen Namen gesetzt
  • Senden Sie die Antwort an den Platzhalter "txtHint"