AJAX ASP


AJAX is used to create more interactive applications.

AJAX ASP Example

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

Example

Start typing a name in the input field below:

Suggestions:


Explanation of examples - HTML page

When the user types characters in the input box above, the "showHint()" function will be 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>Start typing a name in the input field below:</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), this function will clear the content of the txtHint placeholder and exit the function.

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

  • Create XMLHttpRequest object

  • Create Function executed when the server response is ready

  • Sends a request to a file on the server

  • Please note the parameter (q) added to the end of the URL (Including the content of the input box)

ASP file

The server page called through JavaScript above is an ASP file named "gethint.asp" .

The source code in "gethint.asp" checks the name array and 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 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
%>

Explanation: If JavaScript sends any text (i.e. strlen($q) > 0), what happens is:

  1. Find names matching the characters sent by JavaScript

  2. If no match is found, set the response string to "no suggestion"

  3. If one or more matching names are found, use all names Set response string

  4. Send response to "txtHint" placeholder