前几天写的AJAX学习笔记,那么今天就来写一个实例分析:
前端案例代码
<html>
<head>
<meta charset="utf-8">
<title>测试AJAX</title>
</head>
<body>
<div>
输入框:<input type="Text" name="input" onkeyup="showHint()">
</div>
<script>
function showHint(str){
var request ;
if(str.length == 0){
document.getElementById.innerHTML = "";
return ;
}
if(window.XMLHttpRequest){//非IE5.IE6的浏览器
request = new XMLHttpRequest;
}else{
request = new ActiveXObject("microsoft.XMLHttp");
}
request.onreadystatechange = function(){
if(request.readyState = 4 && request.status = 200){
document.getElementById("myDiv").innerHTML = request.responseText;
}
}
request.open("POST","gethint.php?q="+str,true);
request.send();
}
</script>
</body>
</html>
服务器端实例代码
<?php
//检验的字符,并将字符填充为数组
$a[] = "Anna";
$a[] = "Brittanny";
$a[] = "Cinderella";
$a[] = "Dinna";
$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[] = "Raqual";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizbeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
//获取来自前端HTML的q的参数
$q = $_POST["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];
}
}
}
}
//根据$hint中的值确定返回的内容
if($hint == ""){
response = "no suggestion";
}else{
response = $hint;
}
//返回response内容
echo response;
?>
上述的案例分析只是我的个人想法,欢迎大家相互交流,可以发送邮件。