AJAX is used to create more dynamic applications.
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:
Try entering the letter a in the input box:
Prompt information:
When the user types characters in the input box above, 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 ) { // IE7+, Firefox, Chrome, Opera, Safari browser execution code xmlhttp = new XMLHttpRequest ( ) ; } else { // IE6, IE5 browser execution code xmlhttp = new ActiveXObject ( " Microsoft.XMLHTTP " ) ; } xmlhttp.onreadystatechange = function ( ) { if ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { document . getElementById ( " txtHint " ) . innerHTML = xmlhttp . responseText ; } } xmlhttp . open ( " GET " , " /try/ajax/gethint.php?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, showHint() function performs the following tasks:
Create XMLHttpRequest object
Execute function when server response is ready
Send the request to a file on the server
Note that we added a parameter q (with the contents of the input box) to the URL
The server page called by the JavaScript above is an ASP file named "gethint.asp".
Below, we create two versions of the server file, one written in ASP and the other in PHP.
The source code in "gethint.asp" checks an array of names and returns the corresponding names to the browser:
<%response.expires=-1dim a(30)'Fill up array with namesa(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)="Tov e"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 URLq=ucase(request.querystring("q"))'lookup all hints from array if length of q>0if 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 nextend if'Output "no suggestion" if no hint were found'or output the correct valuesif hint="" then response.write("no suggestion")else response.write(hint)end if%>The code below is written in PHP and has the same effect as the ASP code above.
<?php// Fill up array with names$a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva";$a[] ="Fiona";$a[]="Gunda";$a []="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina ";$a[]="Ophelia";$a[]="Petunia ";$a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[ ]="Evita";$a[]="Sunniva";$a[]="To ve";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a []="Wenche";$a[]="Vicky";//get the q parameter from URL$q=$_GET["q"];//lookup all hints from array if length of q>0if (strlen($q) > 0){ $hint=""; for($i= 0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } }}// Set output to "no suggestion" if no hint were found// or to the correct valuesif ($hint == ""){ $response="no suggestion";}else{ $response=$hint;}//output the responseecho $response;?>