AJAX boleh memberikan pengguna pengalaman carian yang lebih mesra dan interaktif
Dalam contoh berikut, kami akan menunjukkan carian masa nyata dan mendapatkan hasil carian semasa anda menaip data
Berbanding dengan carian tradisional, carian masa nyata mempunyai banyak kelebihan:
Apabila menaip data, hasil yang sepadan akan dipaparkan
Apabila anda terus menaip data, hasil yang sepadan akan dipaparkan hasilnya
Jika terdapat terlalu sedikit hasil, padamkan aksara untuk mendapatkan julat yang lebih luas
Sila lihat kes berikut
Mula-mula kita buat head.xml dan kodnya ialah seperti berikut
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function showResult(str){
if (str.length==0){
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
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("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","demo.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>Seterusnya kita menulis fail php, kodnya adalah seperti berikut:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
// 如果 q 参数存在则从 xml 文件中查找数据
if (strlen($q)>0){
$hint="";
for($i=0; $i<($x->length); $i++){
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1){
// 找到匹配搜索的链接
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)){
if ($hint==""){
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}else{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// 如果没找到则返回 "no suggestion"
if ($hint==""){
$response="no suggestion";
}else{
$response=$hint;
}
// 输出结果
echo $response;
?>Nota:
Jika kotak input kosong (str.length==0 ), fungsi ini akan Kosongkan kandungan ruang letak carian langsung dan keluar dari fungsi tersebut.
Jika kotak input tidak kosong, maka showResult() akan melakukan langkah berikut:
Buat objek XMLHttpRequest
Buat fungsi untuk dilaksanakan apabila respons pelayan sudah sedia
Hantar permintaan ke fail pada pelayan
Sila beri perhatian kepada parameter (q) yang ditambahkan pada penghujung URL (termasuk kandungan kotak input)
Anda perlu mencipta pautan.xml baharu dan meletakkannya dalam fail yang sama Dalam direktori tahap, kodnya adalah seperti berikut:
<?xml version="1.0" encoding="UTF-8"?>
<pages>
<link>
<title>HTML a 标签</title>
<url>http://www.php.cn/tags/tag-a.html</url>
</link>
<link>
<title>HTML br 标签</title>
<url>http://www.php.cn/tags/tag-br.html</url>
</link>
<link>
<title>CSS background 属性</title>
<url>http://www.php.cn/cssref/css3-pr-background.html</url>
</link>
<link>
<title>CSS border 属性</title>
<url>http://www.php.cn/cssref/pr-border.html</url>
</link>
<link>
<title>JavaScript Date 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-date.html</url>
</link>
<link>
<title>JavaScript Array 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-array.html</url>
</link>
</pages>
bahagian seterusnya