在大二的时候,学习ASP.NET时,听说过Ajax,也知道谷歌的很多应用都用的了Ajax,无奈对JS不感冒,去过图书馆几次,看了几遍,最终放弃。
现在回想起来确实可笑,那么简单的知识点,自己却感到如此恐惧。在ASP.NET中没有用过,那就在PHP中用一次吧。要理解Ajax,首先要懂的JS,Ajax的原理就是通过JS执行代码去请求数据,去做事情,将结果告诉我们就行了,我们根据结果来确定下一步的操作,最常用的就是刷新页面了。本程序由一个html文件,一个JS,一个PHP文件构成。重点就是JS获得用户在html中的输入,去访问PHP文件,将结果返回给html文件。功能是根据用户输入的姓名,去查找匹配的名字。
index.html文件代码如下:
<html>
<head>
<meta charset=utf-8>
<title>测试</title>
<script src="connect.js"></script>
</script>
</head>
<body>
<form>
姓氏:
<input type="combox" id="txt1" onkeyup ="showHint(this.value)">
<br>
</form>
<p>
建议:<span id ="txtHint" ></span></p>
</body>
</html>
connect.js文件代码如下:
var xmlHttp;
function showHint(str)
{
if(str.length == 0)
{
document.getElementById("txtHint").innerHTML="";
}
xmlHttp = new XMLHttpRequest();
if(xmlHttp == null)
{
alert("Browser does not support HTTP Request.");
return ;
}
var url="gethint.php";
url=url+"?q="+str;
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState==4 || xmlHttp.readyState =="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
gethint.php代码如下:
<?php
$a[]="王安娜";
$a[]="王子先";
$a[]="曲大人";
$a[]="曹雪芹";
$a[]="李成才";
$a[]="张虎";
$a[]="刘超锐";
$a[]="赵丽丽";
$a[]="郭少龙";
$a[]="李清湖";
$a[]="马财义";
$a[]="胡春兰";
$a[]="高雪杰";
$a[]="孙高开";
$a[]="苏鑫";
$a[]="郭莫郜";
$a[]="李志强";
$a[]="赵云祥";
$a[]="肖国栋";
$q =$_GET["q"];
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];
}
}
}
}
if($hint=="")
{
$response="没有匹配";
}
else
{
$response=$hint;
}
echo '<font color="blue">'.$response.'</font>';
echo'<br>OK<br>Date and Time is:<br>';
echo date("G:i:s a l,F j Y.");
?>
效果如如下:
没有匹配时:
每天进步一点!