下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信： 请在下面的输入框中键入字母（A - Z）：
| <html><!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| 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","/try/ajax/gethint.php?q="+str,true); |
| xmlhttp.send(); |
| } |
| </script> |
| </head> |
| <body> |
| <h3>Start typing a name in the input field below:</h3> |
| <form action=""> |
| First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" /> |
| </form> |
| <p>Suggestions: <span id="txtHint"></span></p> |
| </body> |
| </html> |
当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发：
| 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(); |
| } |
源代码解析：
如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "gethint.asp"。
下面，我们创建了两个版本的服务器文件，一个用 ASP 编写，另一个用 PHP 编写。
"gethint.asp" 中的源代码会检查一个名字数组，然后向浏览器返回相应的名字：
| <% |
| 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 编写，与上面的 ASP 代码作用是一样的。
| <?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[]="Tove"; |
| $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>0 |
| if (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 values |
| if ($hint == "") |
| { |
| $response="no suggestion"; |
| } |
| else |
| { |
| $response=$hint; |
| } |
| //output the response |
| echo $response; |
| ?> |
