Latest web development tutorials

ASP - AJAX and ASP

AJAX is used to create more interactive applications.

AJAX ASP examples

The following examples will demonstrate when the user types in a character input box, how Web pages communicate with the Web server:

Examples

Start typing a name in the input field below:

First name:

Suggestions:


Examples explain - HTML page

When a user in the above input box character performs "showHint ()" function. This function consists of "onkeyup" Trigger 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 explained:

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

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

  • Create XMLHttpRequest object
  • Create function when the server is ready to perform the response
  • File on the server to send requests
  • Please note that adding to (contains input box) the end of the URL parameter (q)

ASP file

The above servers through JavaScript calling this page is called "gethint.asp" ASP files.

"Gethint.asp" source code checks array of names, and then returned to the browser corresponding name:

<%
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 the JavaScript send any text (ie, strlen ($ q)> 0), occurs:

  1. Find matching characters to send the names of JavaScript
  2. If no match is found, the response string is set to "no suggestion"
  3. If you find one or more matching names, the names of all settings with the response string
  4. Sending a response to the "txtHint" placeholder