ASP - AJAX and ASP

AJAX is used to create more dynamic applications.

AJAX ASP Example

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

Example

Please type the letter (A - Z) in the input box below:

Name:

Suggestion:

Try the source code yourself

Example Explanation - HTML Page

When the user types characters in the input box above, the "showHint()" function is executed. This function is triggered by the "onkeyup" event:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// Code for IE7+, Firefox, Chrome, Opera, Safari}
  xmlhttp=new XMLHttpRequest();
  }
else
  {// Code for IE6, IE5}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>Please enter English characters in the input box:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

Source code explanation:

If the input box is empty (str.length==0), the function will clear the content of the placeholder txtHint and exit the function.

If the input box is not empty, the showHint() function will perform the following steps:

  • Create an XMLHttpRequest object
  • Create a function to be executed when the server response is ready
  • Send a request to the file on the server
  • Please note the parameter added to the end of the URL (q) (including the content of the input box)

ASP file

This JavaScript call to the server page is an ASP file named "gethint.asp".

'The source code in 'gethint.asp' checks the name array and then returns the corresponding name 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 parameter q from the URL
q=ucase(request.querystring("q"))
'If the length of q is greater than 0, search for all hints in the array
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 no hint is found, output 'no suggestion'
'or output the correct values
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

Source code explanation:

If JavaScript sends any text (i.e., strlen($q) is greater than 0), the following occurs:

  • Find matching names from the characters received from JavaScript
  • If no match is found, set the response string to 'no suggestion'
  • If one or more matching names are found, set the response string with all names
  • Send the response to the placeholder 'txtHint'