Carian masa nyata AJAX
AJAX menyediakan pengguna pengalaman carian yang lebih mesra dan lebih interaktif.
Carian Langsung AJAX
Dalam contoh berikut, kami akan menunjukkan carian masa nyata dan mendapatkan hasil carian semasa anda menaip data.
Carian masa nyata mempunyai banyak kelebihan berbanding carian tradisional:
Apabila data dimasukkan, hasil yang sepadan akan dipaparkan
Sambil anda meneruskan menaip, tapis hasil
Jika terdapat terlalu sedikit hasil carian, alih keluar aksara untuk mendapatkan julat yang lebih luas
Masukkan "HTML " dalam kotak teks di bawah untuk mencari halaman yang mengandungi HTML:
Hasil dalam contoh di atas ditemui dalam fail XML (links.xml). Untuk memastikan contoh ini kecil dan mudah, kami hanya menyediakan 6 hasil.
Penjelasan contoh - halaman HTML
Apabila pengguna menaip aksara 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 浏览器执行
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","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), fungsi ini akan mengosongkan kandungan ruang letak carian langsung dan keluar dari fungsi tersebut.
Jika kotak input tidak kosong, maka showResult() akan melaksanakan langkah berikut:
Buat objek XMLHttpRequest
Buat Fungsi dilaksanakan apabila respons pelayan sedia
Menghantar permintaan ke fail pada pelayan
Sila ambil perhatian parameter (q) ditambahkan pada penghujung URL (Termasuk kandungan kotak input)
Fail PHP
Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail PHP dinamakan "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 中获取参数 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;
?>Jika JavaScript menghantar sebarang teks (iaitu strlen($q) > 0), ini berlaku:
Memuatkan fail XML ke dalam objek XML DOM baharu
-
Gelung semua <title> elemen untuk mencari satu yang sepadan dengan teks yang diluluskan oleh JavaScript
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".
Tutorial video yang disyorkan: "Tutorial AJAX"http://www.php.cn/course/list/ 25 .html
