AJAX menyediakan pengguna dengan pengalaman carian yang lebih mesra dan lebih interaktif.
Carian Langsung AJAX
Dalam contoh di bawah, kami akan menunjukkan carian masa nyata yang boleh diperoleh semasa anda menaip Carian data keputusan.
Berbanding dengan carian tradisional, carian masa nyata mempunyai banyak kelebihan:
1 Apabila memasukkan data, hasil yang sepadan akan dipaparkan
2. tapis keputusan
3 Jika terdapat terlalu sedikit hasil, padamkan aksara untuk mendapatkan julat yang lebih luas
Masukkan "HTML" dalam kotak teks di bawah untuk mencari Halaman 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 menjadi 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), ini fungsi akan Kosongkan kandungan ruang letak carian langsung dan keluar dari fungsi tersebut.
Jika kotak input tidak kosong, showResult() akan melaksanakan langkah berikut:
1 Cipta objek XMLHttpRequest
2 apabila respons pelayan sedia
3 Hantar permintaan ke fail pada pelayan
4 Sila ambil perhatian parameter (q) yang ditambahkan pada hujung URL (mengandungi kandungan kotak input)
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 中获取参数 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), apa yang akan berlaku:
1) Muatkan fail XML ke dalam objek XML DOM baharu
2) Lintas semua elemen <tajuk> >
3) Tetapkan URL dan tajuk yang betul dalam pembolehubah "$response". Jika lebih daripada satu padanan ditemui, semua padanan ditambahkan pada pembolehubah.
4) Jika tiada padanan ditemui, tetapkan pembolehubah $response kepada "tiada cadangan".
bahagian seterusnya
