AJAX ASP-Beispiel
AJAX wird verwendet, um interaktivere Anwendungen zu erstellen.
AJAX ASP-Beispiel
Das folgende Beispiel zeigt, wie eine Webseite mit einem Webserver kommunizieren kann, während ein Benutzer Zeichen in ein Eingabefeld eingibt:
Beispiel
Start typing a name in the input field below:
Beispiel erklärt
Wenn im obigen Beispiel ein Benutzer ein Zeichen in das Eingabefeld eingibt, wird eine Funktion namens "showHint()" ausgeführt.
Die Funktion wird durch das Ereignis onkeyup ausgelöst.
Hier ist der HTML-Code:
Beispiel
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Code-Erklärung:
Prüfen Sie zunächst, ob das Eingabefeld leer ist (str.length == 0). Wenn dies der Fall ist, löschen Sie den Inhalt des txtHint-Platzhalters und beenden Sie die Funktion.
Wenn das Eingabefeld jedoch nicht leer ist, gehen Sie wie folgt vor:
- Erstellen Sie ein XMLHttpRequest-Objekt
- Erstellen Sie die Funktion, die ausgeführt werden soll, wenn die Serverantwort bereit ist
- Senden Sie die Anforderung an eine ASP-Datei (gethint.asp) auf dem Server
- Beachten Sie, dass der q-Parameter gethint.asp?q="+str hinzugefügt wird
- Die str-Variable enthält den Inhalt des Eingabefelds
Die ASP-Datei - "gethint.asp"
Die ASP-Datei überprüft ein Array von Namen und gibt die entsprechenden Namen an den Browser zurück:
<%
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
%>