AJAX wird verwendet, um interaktivere Anwendungen zu erstellen.
Das folgende Beispiel zeigt, wie eine Webseite mit a kommunizieren kann Webserver, während ein Benutzer Zeichen in ein Eingabefeld eingibt:
Beginnen Sie mit der Eingabe eines Namens in das Eingabefeld unten:
Suggestions:
First name:
Wenn ein Benutzer im obigen Beispiel ein Zeichen in das Eingabefeld eingibt, wird eine Funktion ausgeführt namens showHint() wird ausgeführt.
Die Funktion wird durch das Ereignis onkeyup ausgelöst.
Hier ist der Code:
<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>Probieren Sie es selbst aus →
<!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>
Code-Erklärung:
Überprüfen Sie zunächst, ob das Eingabefeld leer ist (str.length == 0). Wenn ja, löschen Sie das 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 Anfrage an eine ASP-Datei (gethint.asp) auf dem Server
Beachten Sie, dass der q-Parameter gethint.asp?q="+str hinzugefügt wurde
Die str-Variable enthält den Inhalt des Eingabefelds
Die ASP-Datei überprüft ein Array von Namen und gibt die entsprechenden Namen an die zurück Browser:
<%
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
%>