（二）AJAX基本介绍和简单实例02

Demo02实例----简单的查询器

实例运行后的初始界面：

在文本框中输入姓氏“杜”，出现如下结果：

<html>
<Metahttp-equiv="content-type"charset="utf-8"/>
<head>
<scripttype="text/javascript">
/*
以下代码大家应该可以看得懂，不懂的话请参照第一讲！
*/
//显示出对应的提示内容，传入一个参数，它代表查找的关键字
functionshowHint(str)
{
varxmlhttp;
if(str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{
xmlhttp=newXMLHttpRequest();
}
else
{
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//向Demo02.PHP传递一个变量q
xmlhttp.open("GET","./Demo02.PHP?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<divid="all">
</div>
<h3>请在下面的输入框中键入九骥网维工作室的成员姓氏（杜，郑，周，邱等等）：</h3>
<formaction="">
<!--onkeyup是一个按键激发事件，按下键盘上的按键会执行对应的函数-->
姓氏：<inputtype="text"id="txt1"onKeyUp="showHint(this.value);"/>
</form>
<p>提示：<spanid="txtHint"></span></p>
</body>
</html>

Demo02.PHP 文件的内容：

<?PHP
//用名字来填充数组，用于检索
$a[]="杜森";
$a[]="邱阳阳";
$a[]="杜秋意";
$a[]="费艳婷";
$a[]="刘欢";
$a[]="费世明";
$a[]="董珍珍";
$a[]="吴明坤";
$a[]="阿伊鲜";
$a[]="罗沛";
$a[]="周凯";
$a[]="郑周林";
$a[]="梁文生";
$a[]="徐哲靖";
$a[]="周天天";
$a[]="张萌乐2";
$a[]="杨敏2";
$a[]="王曾1";
$a[]="杜森2";
$a[]="邱阳阳3";
$a[]="杜秋意2";
$a[]="费艳婷2";
$a[]="刘欢4";
$a[]="费世明3";
$a[]="董珍珍2";
$a[]="吴明坤1";
$a[]="阿伊鲜6";
$a[]="罗沛5";
$a[]="周凯4";
$a[]="郑周林3";
$a[]="梁文生";
$a[]="徐哲靖2";
$a[]="周天天2";
$a[]="张萌乐5";
$a[]="杨敏2";
$a[]="王曾2";
//获得来自URL的q参数
$q=$_GET["q"];

//如果q大于0，则查找数组中的所有提示
if(strlen($q)>0)
{
$hint="";
//遍历数组
for($i=0;$i<count($a);$i++)
{
//判断当前输入的内容与所有的内容是否符合
if(strtolower($q)==strtolower(substr($a[$i],strlen($q))))
{
if($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint.",".$a[$i];
}
}
}
}

//如果未找到提示，则把输出设置为"未找到"+传过来的值
//否则设置为正确的值
if($hint=="")
{
$response="未找到".$q;
}
else
{
$response=$hint;
}

//输出响应
echo$response;
?>

（二）AJAX基本介绍和简单实例02

猜你在找的Ajax相关文章