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:
Suggestions:
First name:
Beispiel erklärt
Wenn im obigen Beispiel ein Benutzer ein Zeichen in das Eingabefeld eingibt, wird eine aufgerufene Funktion showHint()
ausgeführt.
Die Funktion wird durch das onkeyup
Ereignis ausgelöst.
Hier ist der Code:
Beispiel
<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>
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 Parameter q 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
%>