JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
AJAX ASP
The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field.
Example
<!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>
Output
The XMLHttpRequest Object
Start typing a name in the input field below:
Suggestions:
First name:
Code Explaination
First, check whether the input field is empty (str.length == 0). If that is so, then clear the content of the txtHint placeholder and exit the function.
In case the input field is not empty, process the:
- Generate an XMLHttpRequest object.
- Built the function to be executed when the server response is ready.
- Send the request off to an ASP file (gethint.asp) on the server.
- Notice that q parameter is added gethint.asp?q=”+str.
- The str variable holds the content of the input field.
The ASP File – “gethint.asp”
The ASP file goes through an array of names, and returns the corresponding name(s) to the 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
%>