AJAX ASP 实例

AJAX 用于创建更具交互性的应用程序。

AJAX ASP 实例

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

实例

  1. <html>
  2. <head>
  3. <script>
  4. function showHint(str) {
  5.     if (str.length == 0) { 
  6.         document.getElementById("txtHint").innerHTML = "";
  7.         return;
  8.     } else {
  9.         var xmlhttp = new XMLHttpRequest();
  10.         xmlhttp.onreadystatechange = function() {
  11.             if (this.readyState == 4 && this.status == 200) {
  12.                 document.getElementById("txtHint").innerHTML = this.responseText;
  13.             }
  14.         };
  15.         xmlhttp.open("GET", "gethint.asp?q=" + str, true);
  16.         xmlhttp.send();
  17.     }
  18. }
  19. </script>
  20. </head>
  21. <body>
  22.  
  23. <p><b>请在下面的输入字段中键入字母 A-Z：</b></p>
  24. <form> 
  25. 姓名：<input type="text" onkeyup="showHint(this.value)">
  26. </form>
  27. <p>搜索建议：<span id="txtHint"></span></p>
  28. </body>
  29. </html>

例子解释

在上面的例子中，当用户在输入字段中键入字符时，会执行名为 "showHint()" 的函数。

此函数被 onkeyup 事件触发。

下面是 HTML 代码：

代码解释：

首先，检查输入字段是否为空（str.length == 0）；如果是，清空 txtHint 占位符的内容并退出函数。

不过，如果输入字段不为空，则进行如下：

  • 创建 XMLHttpRequest 对象
  • 创建当服务器响应就绪时执行的函数
  • 发送请求到服务器上的 ASP 文件（gethint.asp）
  • 请注意添加到 gethint.asp 的 q 参数
  • str 变量保存了输入字段的内容

ASP 文件 - "gethint.asp"

这个 ASP 文件检查姓名数组，然后向浏览器返回对应的姓名：

  1. <%
  2.  response.expires=-1
  3.  dim a(32)
  4.  '用姓名填充数组
  5.  a(1)="Ava"
  6.  a(2)="Brielle"
  7.  a(3)="Caroline"
  8.  a(4)="Diana"
  9.  a(5)="Elise"
  10.  a(6)="Fiona"
  11.  a(7)="Grace"
  12.  a(8)="Hannah"
  13.  a(9)="Ileana"
  14.  a(10)="Jane"
  15.  a(11)="Kathryn"
  16.  a(12)="Laura"
  17.  a(13)="Millie"
  18.  a(14)="Nancy"
  19.  a(15)="Opal"
  20.  a(16)="Petty"
  21.  a(17)="Queenie"
  22.  a(18)="Rose"
  23.  a(19)="Shirley"
  24.  a(20)="Tiffany"
  25.  a(21)="Ursula"
  26.  a(22)="Victoria"
  27.  a(23)="Wendy"
  28.  a(24)="Xenia"
  29.  a(25)="Yvette"
  30.  a(26)="Zoe"
  31.  a(27)="Angell"
  32.  a(28)="Adele"
  33.  a(29)="Beatty"
  34.  a(30)="Carlton"
  35.  a(31)="Elisabeth"
  36.  a(32)="Violet"
  37.  
  38.  '从 URL 获取 q 参数
  39.  q=ucase(request.querystring("q"))
  40.  
  41.  '查看数组中所有 hint，q 的长度是否大于 0
  42.  if len(q)>0 then
  43.    hint=""
  44.    for i=1 to 30
  45.      if q=ucase(mid(a(i),1,len(q))) then
  46.        if hint="" then
  47.          hint=a(i)
  48.        else
  49.          hint=hint & " , " & a(i)
  50.        end if
  51.      end if
  52.    next
  53.  end if
  54.  
  55.  '如果未找到 hint，输出 "no suggestion"，或输出正确的值
  56.  if hint="" then
  57.    response.write("no suggestion")
  58.  else
  59.    response.write(hint)
  60.  end if
  61. %>