Carian masa nyata AJAX
Contoh PHP - carian masa nyata AJAX
Penjelasan contoh - halaman HTML
Apabila pengguna berada dalam Apabila aksara ditaip dalam kotak input di atas, fungsi "showResult()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onkeyup":
<html>
<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","livesearch.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>Penjelasan kod sumber:
Jika kotak input kosong (str.length==0), ini fungsi akan Kosongkan kandungan ruang letak carian langsung dan keluar dari fungsi tersebut.
Jika kotak input tidak kosong, showResult() akan melaksanakan langkah berikut:
·??Buat objek XMLHttpRequest
·??Buat fungsi untuk dilaksanakan apabila respons pelayan sedia
·???Hantar permintaan kepada fail pada pelayan
·???Sila beri perhatian kepada parameter (q) yang ditambahkan pada hujung URL (mengandungi kandungan input box)
Fail PHP
Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail PHP bernama "livesearch.php".
Kod sumber dalam "livesearch.php" mencari fail XML untuk tajuk yang sepadan dengan rentetan carian dan mengembalikan hasil:
<?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>";
}
}
}
}
}
// 如果沒(méi)找到則返回 "no suggestion"
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
// 輸出結(jié)果
echo $response;
?>Jika JavaScript menghantar sebarang teks (iaitu strlen($q : ??>
· Tetapkan URL dan tajuk yang betul dalam pembolehubah "$response". Jika lebih daripada satu padanan ditemui, semua padanan ditambahkan pada pembolehubah. · Jika tiada padanan ditemui, tetapkan pembolehubah $response kepada "tiada cadangan".
