ASP - AJAX 与 ASP

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

AJAX ASP 实例

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

实例

请在下面的输入框中键入字母（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>

实例解释 - HTML 页面

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function showHint(str)
  6. {
  7. if (str.length==0)
  8.   {
  9.   document.getElementById("txtHint").innerHTML="";
  10.   return;
  11.   }
  12. if (window.XMLHttpRequest)
  13.   {// 针对 IE7+, Firefox, Chrome, Opera, Safari 的代码
  14.   xmlhttp=new XMLHttpRequest();
  15.   }
  16. else
  17.   {// 针对 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","gethint.asp?q="+str,true);
  28. xmlhttp.send();
  29. }
  30. </script>
  31. </head
  32. <body>
  33.  
  34. <p><b>请在输入框中输入英文字符：</b></p>
  35. <form>
  36. First name: <input type="text" onkeyup="showHint(this.value)" size="20">
  37. </form>
  38. <p>Suggestions: <span id="txtHint"></span></p>
  39.  
  40. </body>
  41. </html>

源代码解释：

如果输入框是空的（str.length==0），该函数会清空占位符 txtHint 的内容，并推出该函数。

如果输入框不是空的，那么 showHint() 会执行以下步骤：

  • 创建 XMLHttpRequest 对象
  • 创建在服务器响应就绪时执行的函数
  • 向服务器上的文件发送请求
  • 请注意添加到 URL 末端的参数（q）（包含输入框的内容）

ASP 文件

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

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

  1. <%
  2. response.expires=-1
  3. dim a(30)
  4. 'Fill up array with names
  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. 'or output the correct values
  55. if hint="" then
  56.   response.write("no suggestion")
  57. else
  58.   response.write(hint)
  59. end if
  60. %>

源代码解释：

如果 JavaScript 发送了任何文本（即 strlen($q) 大于 0），则会发生：

  • 查找匹配来自 JavaScript 的字符的姓名
  • 如果未找到匹配，则将响应字符串设置为 "no suggestion"
  • 如果找到一个或多个匹配姓名，则用所有姓名设置响应字符串
  • 把响应发送到占位符 "txtHint"