AJAX ASP Example

AJAX is used to create more interactive applications.

AJAX ASP Example

The following example demonstrates how the web page communicates with the web server when the user types characters in the input field:

Example

Please enter letters A-Z in the input field below:

Name:

Search Suggestions:

Example Explanation

In the above example, when the user types characters in the input field, the function named "showHint()" is executed.

This function is triggered by the onkeyup event.

The following is HTML code:

Example

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        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>Please enter letters A-Z in the following input field:</b></p>
<form> 
Name:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Search Suggestions:<span id="txtHint"></span></p>
</body>
</html>

Try it yourself

Code Explanation:

Firstly, check if the input field is empty (str.length == 0If so, clear the content of the txtHint placeholder and exit the function.

However, if the input field is not empty, then do the following:

  • Create an XMLHttpRequest object
  • Create a function to be executed when the server response is ready
  • Send a request to the ASP file (gethint.asp) on the server
  • Please note to add the q parameter to gethint.asp
  • The str variable saves the content of the input field

ASP file - "gethint.asp"

This ASP file checks the name array and then returns the corresponding name to the browser:

<%
 response.expires=-1
 dim a(32)
 Fill the array with names
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"
 Get q parameter from URL
 q=ucase(request.querystring("q"))
 Check if all hints in the array, the length of q is greater than 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
 If hint is not found, output "no suggestion", or output the correct value
 if hint="" then
   response.write("no suggestion")
 else
   response.write(hint)
 end if
%>