Pengenalan PHP pemula kepada carian masa nyata AJAX
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 瀏覽器執(zhí)行
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 瀏覽器執(zhí)行
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 中獲取參數(shù) q 的值
$q=$_GET["q"];
// 如果 q 參數(shù)存在則從 xml 文件中查找數(shù)據(jù)
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;
}
// 輸出結(jié)果
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://ipnx.cn/tags/tag-a.html</url> </link> <link> <title>HTML br 標簽</title> <url>http://ipnx.cn/tags/tag-br.html</url> </link> <link> <title>CSS background 屬性</title> <url>http://ipnx.cn/cssref/css3-pr-background.html</url> </link> <link> <title>CSS border 屬性</title> <url>http://ipnx.cn/cssref/pr-border.html</url> </link> <link> <title>JavaScript Date 對象</title> <url>http://ipnx.cn/jsref/jsref-obj-date.html</url> </link> <link> <title>JavaScript Array 對象</title> <url>http://ipnx.cn/jsref/jsref-obj-array.html</url> </link> </pages>
