Tutorial asas pembangunan PHP AJAX carian masa nyata
Carian masa nyata AJAX
AJAX boleh memberikan pengguna pengalaman carian yang lebih mesra dan interaktif.
Contoh
Dalam contoh berikut, kami akan menunjukkan carian masa nyata dan hasil carian boleh diperoleh semasa anda menaip data .
Carian masa nyata mempunyai banyak kelebihan berbanding carian tradisional:
Apabila data dimasukkan, hasil yang sepadan akan dipaparkan
Semasa anda meneruskan menaip data, tapis hasil
Jika terdapat terlalu sedikit hasil carian, alih keluar aksara untuk mendapatkan julat yang lebih luas
Kesan output adalah seperti yang ditunjukkan di sebelah kanan
Keputusan dalam contoh di atas dicari dalam fail XML (3.xml). Untuk memastikan contoh ini kecil dan mudah, kami hanya menyediakan 6 hasil.
Contoh ini termasuk tiga bahagian
Halaman borang HTML
Fail PHP
-
Fail XML
Halaman borang HTML
Kod sumber 1.php adalah seperti berikut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showResult(str)
{
//如果輸入框是空的（str.length==0），該函數(shù)會(huì)清空 livesearch 占位符的內(nèi)容，并退出該函數(shù)
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
//輸入框不是空的，則showResult() 會(huì)執(zhí)行以下代碼
//創(chuàng)建 XMLHttpRequest 對象
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 瀏覽器執(zhí)行
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//創(chuàng)建在服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
//向服務(wù)器上的文件發(fā)送請求
xmlhttp.open("GET","2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<!-- 鍵盤按鍵被松開時(shí)onkeyup 事件發(fā)生 ,調(diào)用showResult()函數(shù)-->
<form>
<p>在下面的文本框中輸入 "HTML"，搜索包含 HTML 的頁面：</p>
<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.
Jika kotak input tidak kosong, maka showResult() akan melaksanakan langkah berikut:
Cipta objek XMLHttpRequest
Buat Fungsi dilaksanakan apabila respons pelayan sedia
Hantar permintaan ke fail pada pelayan
Sila ambil perhatian parameter (q) ditambahkan pada penghujung URL (Termasuk kandungan kotak input)
fail PHP
Pelayan yang dipanggil oleh JavaScript dalam perenggan di atas Halaman adalah fail PHP bernama "2.php".
Kod sumber dalam "2.php" akan mencari fail XML untuk tajuk yang sepadan dengan rentetan carian dan mengembalikan hasil:
Lihat 2.php untuk kod sumber
<?php
//創(chuàng)建XML DOM對象
$xmlDoc=new DOMDocument();
//加載XML文件到新的XML DOM對象
$xmlDoc->load("3.xml");
//將標(biāo)簽名為“l(fā)ink”的對象的集合賦值給$x
$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)//元素的節(jié)點(diǎn)類型，1：元素節(jié)點(diǎn)，2：屬性節(jié)點(diǎn)
{
// 找到匹配搜索的鏈接
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;// 輸出結(jié)果
?> Jika JavaScript menghantar sebarang teks (iaitu strlen($q) > 0), apakah yang berlaku:
PHP mencipta objek XML DOM bagi fail "links.xml"
Lintas semua <title> elemen (nodetypes = 1) untuk mencari teks yang sepadan dengan teks yang diluluskan oleh JavaScript
Cari pautan yang mengandungi tajuk yang betul dan tetapkannya Untuk pembolehubah "$response", jika lebih daripada satu padanan ditemui, semua padanan ditambahkan pada pembolehubah.
Jika tiada padanan ditemui, tetapkan pembolehubah $response kepada "tiada cadangan".
$response ialah output yang dihantar kepada pemegang tempat "livesearch"
Fail XML
Lihat 3.php
untuk kod sumber<?xml version="1.0" encoding="UTF-8"?> <pages> <link> <title>HTML a 標(biāo)簽</title> <url>http://ipnx.cn/tags/tag-a.html</url> </link> <link> <title>HTML br 標(biāo)簽</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>
Pengalaman pembelajaran
Contoh ini terutamanya termasuk perkara pengetahuan berikut:
Asas borang
Peristiwa onkeyup: Berlaku apabila kekunci papan kekunci dilepaskan
Panggilan fungsi, hantaran nilai fungsi
Penciptaan objek AJAX XMLHttpRequest, respons pelayan Fungsi dilaksanakan semasa melaksanakan, menghantar permintaan kepada fail pada pelayan: Lihat 1-5 untuk pengalaman pembelajaran
kaedah HTML DOM getElementById(): Mengembalikan objek pertama dengan Rujukan ID yang ditentukan
l pengetahuan berkaitan XML
Cipta objek XML DOM
Muat fail XML ke objek XML DOM baharu
Dapatkan objek nama teg tertentu: getElementsByTagName()
Dapatkan koleksi bahagian kanak-kanak bagi elemen tertentu: HTML DOM childNodes
Dapatkan nilai nod elemen butang pertama: HTML DOM nodeValue
Kembalikan nod anak pertama elemen: kaedah HTML DOM item()
Fungsi berkaitan:
Strlen(): Mengembalikan panjang rentetan
Sstritr( ) : Cari kejadian pertama rentetan dalam rentetan lain
