AJAX ASP

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

%>