AJAX ASP/PHP 请求实例

AJAX 用于创造动态性更强的应用程序。

AJAX ASP/PHP 实例

下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信：

请在下面的输入框中键入字母（A - Z）：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function showHint(str)
  5. {
  6. var xmlhttp;
  7. if (str.length==0)
  8.   { 
  9.   document.getElementById("txtHint").innerHTML="";
  10.   return;
  11.   }
  12. if (window.XMLHttpRequest)
  13.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  14.   xmlhttp=new XMLHttpRequest();
  15.   }
  16. else
  17.   {// code for IE6, IE5
  18.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  19.   }
  20. xmlhttp.onreadystatechange=function()
  21.   {
  22.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  23.     {
  24.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  25.     }
  26.   }
  27. xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
  28. xmlhttp.send();
  29. }
  30. </script>
  31. </head>
  32. <body>
  34. <h3>请在下面的输入框中键入字母（A - Z）：</h3>
  35. <form action=""> 
  36. 姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
  37. </form>
  38. <p>建议：<span id="txtHint"></span></p> 
  40. </body>
  41. </html>

实例解释 - showHint() 函数

当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发：

  1. function showHint(str)
  2. {
  3. var xmlhttp;
  4. if (str.length==0)
  5.   {
  6.   document.getElementById("txtHint").innerHTML="";
  7.   return;
  8.   }
  9. if (window.XMLHttpRequest)
  10.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  11.   xmlhttp=new XMLHttpRequest();
  12.   }
  13. else
  14.   {// code for IE6, IE5
  15.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16.   }
  17. xmlhttp.onreadystatechange=function()
  18.   {
  19.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  20.     {
  21.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  22.     }
  23.   }
  24. xmlhttp.open("GET","gethint.asp?q="+str,true);
  25. xmlhttp.send();
  26. }

源代码解释：

如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。

如果输入框不为空，showHint() 函数执行以下任务：

  • 创建 XMLHttpRequest 对象
  • 当服务器响应就绪时执行函数
  • 把请求发送到服务器上的文件
  • 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

AJAX 服务器页面 - ASP 和 PHP

由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "gethint.asp"。

下面，我们创建了两个版本的服务器文件，一个用 ASP 编写，另一个用 PHP 编写。

ASP 文件

"gethint.asp" 中的源代码会检查一个名字数组，然后向浏览器返回相应的名字：

  1. <%
  2. response.expires=-1
  3. dim a(30)
  4. '用名字来填充数组
  5. a(1)="Anna"
  6. a(2)="Brittany"
  7. a(3)="Cinderella"
  8. a(4)="Diana"
  9. a(5)="Eva"
  10. a(6)="Fiona"
  11. a(7)="Gunda"
  12. a(8)="Hege"
  13. a(9)="Inga"
  14. a(10)="Johanna"
  15. a(11)="Kitty"
  16. a(12)="Linda"
  17. a(13)="Nina"
  18. a(14)="Ophelia"
  19. a(15)="Petunia"
  20. a(16)="Amanda"
  21. a(17)="Raquel"
  22. a(18)="Cindy"
  23. a(19)="Doris"
  24. a(20)="Eve"
  25. a(21)="Evita"
  26. a(22)="Sunniva"
  27. a(23)="Tove"
  28. a(24)="Unni"
  29. a(25)="Violet"
  30. a(26)="Liza"
  31. a(27)="Elizabeth"
  32. a(28)="Ellen"
  33. a(29)="Wenche"
  34. a(30)="Vicky"
  35.  
  36. '获得来自 URL 的 q 参数
  37. q=ucase(request.querystring("q"))
  38.  
  39. '如果 q 大于 0，则查找数组中的所有提示
  40. if len(q)>0 then
  41.   hint=""
  42.   for i=1 to 30
  43.     if q=ucase(mid(a(i),1,len(q))) then
  44.       if hint="" then
  45.         hint=a(i)
  46.       else
  47.         hint=hint & " , " & a(i)
  48.       end if
  49.     end if
  50.   next
  51. end if
  52.  
  53. '如果未找到提示，则输出 "no suggestion"
  54. '否则输出正确的值
  55. if hint="" then
  56.   response.write("no suggestion")
  57. else
  58.   response.write(hint)
  59. end if
  60. %>

PHP 文件

下面的代码用 PHP 编写，与上面的 ASP 代码作用是一样的。

注释：如需在 PHP 中运行这个例子，请将 url 变量的值（Javascript 代码中）由 "gethint.asp" 改为 "gethint.php"。

  1. <?php
  2. // 用名字来填充数组
  3. $a[]="Anna";
  4. $a[]="Brittany";
  5. $a[]="Cinderella";
  6. $a[]="Diana";
  7. $a[]="Eva";
  8. $a[]="Fiona";
  9. $a[]="Gunda";
  10. $a[]="Hege";
  11. $a[]="Inga";
  12. $a[]="Johanna";
  13. $a[]="Kitty";
  14. $a[]="Linda";
  15. $a[]="Nina";
  16. $a[]="Ophelia";
  17. $a[]="Petunia";
  18. $a[]="Amanda";
  19. $a[]="Raquel";
  20. $a[]="Cindy";
  21. $a[]="Doris";
  22. $a[]="Eve";
  23. $a[]="Evita";
  24. $a[]="Sunniva";
  25. $a[]="Tove";
  26. $a[]="Unni";
  27. $a[]="Violet";
  28. $a[]="Liza";
  29. $a[]="Elizabeth";
  30. $a[]="Ellen";
  31. $a[]="Wenche";
  32. $a[]="Vicky";
  33.  
  34. //获得来自 URL 的 q 参数
  35. $q=$_GET["q"];
  36.  
  37. //如果 q 大于 0，则查找数组中的所有提示
  38. if (strlen($q) > 0)
  39.   {
  40.   $hint="";
  41.   for($i=0; $i<count($a); $i++)
  42.     {
  43.     if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
  44.       {
  45.       if ($hint=="")
  46.         {
  47.         $hint=$a[$i];
  48.         }
  49.       else
  50.         {
  51.         $hint=$hint." , ".$a[$i];
  52.         }
  53.       }
  54.     }
  55.   }
  56.  
  57. // 如果未找到提示，则把输出设置为 "no suggestion"
  58. // 否则设置为正确的值
  59. if ($hint == "")
  60.   {
  61.   $response="no suggestion";
  62.   }
  63. else
  64.   {
  65.   $response=$hint;
  66.   }
  67.  
  68. //输出响应
  69. echo $response;
  70. ?>