AJAX ASP/PHP 实例


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


AJAX ASP/PHP 实例

下面的例子将为您演示当用户在输入框中键入字符时,网页如何与 web 服务器进行通信:
请在下面的输入框中键入字母(A – Z):

实例

在输入框中尝试输入字母 a:

输入姓名:

提示信息:


实例解析 – showHint() 函数

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

function showHint(str)
{
    var xmlhttp;
    if (str.length==0)
    { 
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // 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();
}

源代码解析:

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

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

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

AJAX 服务器页面 – ASP 和 PHP

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

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

ASP 文件

\”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 文件

下面的代码用 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;
?>