Contoh PHP - carian masa nyata AJAX
Contoh PHP - Carian Masa Nyata AJAX
AJAX boleh memberikan pengguna pengalaman carian yang lebih mesra dan interaktif.
Carian Langsung AJAX
Dalam contoh berikut, kami akan menunjukkan carian masa nyata dan hasil carian boleh diperoleh 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, Tapis hasil carian
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 ruang letak carian langsung kandungan dan keluar dari fungsi.
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 kepada fail pada pelayan
Sila ambil perhatian parameter (q) yang ditambahkan pada penghujung URL (mengandungi kandungan kotak input)
Fail PHP
Perenggan di atas Halaman pelayan yang dipanggil 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:
Muatkan fail XML ke dalam objek XML DOM baharu
Lintas semua elemen <tajuk> 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".
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
