本篇文章是php中使用ajax的案例,该案例有三个文件组成:html文件,js文件,php文件。这个案例实现了一个简单的功能:有一个文本框,当在文本框中输入内容的时候,在页面上会有提示信息展示出来,如下图所示:
一、html页面:input.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
name: <input type="text" name="name" id="txt01">
<p>
Suggestion: <span id="txtHint"></span>
</p>
<script src="input.js"></script>
</body>
</html>
二、js页面:input.js
(function(){// 用于获取xmlHttpRequest
function GetXmlHttpObject(){
var xmlHttp = null;
try{
// Firfox, Opera 8+, safari
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var xmlHttp;
// 展示hint
function showHint(str){
if(str.length == 0){
document.getElementById("txtHint").innerHTML = "";
return;
}
// 创建xmlHttp
xmlHttp = GetXmlHttpObject();
if(xmlHttp==null){
console.log("Brower does not suppert Http Request.");
return;
}
xmlHttp.onreadystatechange = stateChanged;
url = generateUrl("input.php",str);
console.log(url);
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
// 拼接url,拼接一个随机数,防止使用缓存
function generateUrl(php_path,str){
var url = php_path+"?q="+str;
url += "&sid="+Math.random();
return url;
}
function stateChanged(){
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
}
// 添加监听事件
var inputObj = document.getElementById("txt01");
inputObj.removeEventListener("keyup",function(){
showHint(inputObj.value);
});
inputObj.addEventListener("keyup",function(){
showHint(inputObj.value);
});
})();
三、php页面:input.php
<?php
// 填充数组
$a = array("Anna", "Brittany", "Cinderella", "Diana", "Eva",
"Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty",
"Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel",
"Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni",
"Violet", "Liza", "Elizabeth", "Ellen", "Wenche", "Vicky");
#print_r($a);
// 从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],0,strlen($q)))){
if($hint===""){
$hint = $a[$i];
}else{
$hint =$hint.", ".$a[$i];
}
}
}
// 如果提示没有发现,就输出 “no suggestion”
// or to the current values
if($hint === ""){
$response = "no suggestion";
}else{
$response = $hint;
}
// 输出$response
echo $response;
}
?>