AJAX is used to create more dynamic applications.

AJAX ASP/PHP Example

The following example will show you how the web page communicates with the web server when the user types characters in the input box: Please type letters (A - Z) in the input box below:

    

  
Start typing a name in the input field below:
 
 First name:  
 
Suggestions:

Example analysis - showHint() function

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

function showHint(str) { var xmlhttp; 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.html?q="+str,true); xmlhttp.send(); }

Source code analysis:

If the input box is empty (str.length==0 ), the function clears the contents of the txtHint placeholder and exits the function.

If the input box is not empty, the showHint() function performs the following tasks:

  • Create an XMLHttpRequest object

  • When the server Execute the function when the response is ready

  • Send the request to a file on the server

  • Please note that we added a parameter q (with Contents of the input box)

AJAX Server Page - ASP and PHP

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

Below, we create two versions of the server file, one written in ASP and the other written in PHP.

ASP file

The source code in "gethint.asp" checks an array of names 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 %>

PHP file

The following code is written in PHP and has the same function as the above ASP code.

0 if (strlen($q) > 0) { $hint=""; for($i=0; $i