PHP 和 AJAX Live Search
AJAX 可為用戶提供更友好、交互性更強(qiáng)的搜索體驗(yàn)。
AJAX Live Search
在下面的 AJAX 例子中，我們將演示一個(gè)實(shí)時(shí)的搜索。
實(shí)時(shí)的搜索與傳統(tǒng)搜索相比，具有很多優(yōu)勢(shì)：
- 當(dāng)鍵入數(shù)據(jù)時(shí)，就會(huì)顯示出匹配的結(jié)果
- 當(dāng)繼續(xù)鍵入數(shù)據(jù)時(shí)，對(duì)結(jié)果進(jìn)行過濾
- 如果結(jié)果太少，刪除字符就可以獲得更寬的范圍
在下面的文本框中搜索 W3School 的頁(yè)面
本例包括四個(gè)元素：
- 簡(jiǎn)單的 HTML 表單
- JavaScript
- PHP 頁(yè)面
- XML 文檔
在本例中，結(jié)果在一個(gè) XML 文檔 (links.xml) 中進(jìn)行查找。為了讓這個(gè)例子小而簡(jiǎn)單，我們只提供 8 個(gè)結(jié)果。
HTML 表單
這是 HTML 頁(yè)面。它包含一個(gè)簡(jiǎn)單的 HTML 表單，針對(duì)此表單的 CSS 樣式，以及指向 JavaScript 的鏈接：
<html>
<head>
<script src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
例子解釋 - HTML 表單
正如你看到的，HTML 頁(yè)面包含一個(gè)簡(jiǎn)單的 HTML 表單，其中的文本框名為 "txt1"。
表單是這樣工作的：
- 當(dāng)用戶在文本框中按鍵并松開按鍵時(shí)，會(huì)觸發(fā)一個(gè)事件
- 當(dāng)事件觸發(fā)時(shí)，會(huì)執(zhí)行名為 showResult() 的函數(shù)
- 表單下面是名為 "livesearch" 的 <div> 元素。它用作 showResult() 所返回?cái)?shù)據(jù)的占位符
JavaScript
JavaScript 代碼存儲(chǔ)在與 HTML 文檔連接的 "livesearch.js" 中：
var xmlHttp
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1px solid #A5ACB2";
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
例子解釋：
GetXmlHttpObject 與 PHP 和 AJAX 請(qǐng)求 中的例子相同。
showResult() 函數(shù)
該函數(shù)每當(dāng)一個(gè)字符輸入文本框就會(huì)執(zhí)行一次。
如果文本域中沒有輸入 (str.length == 0)，該函數(shù)把返回字段設(shè)置為空，并刪除周圍的任何邊框。
不過，如果文本域中存在輸入，則函數(shù)執(zhí)行：
- 定義發(fā)送到服務(wù)器的 url （文件名）
- 把帶有輸入框內(nèi)容的參數(shù) (q) 添加到 url
- 添加一個(gè)隨機(jī)數(shù)，以防止服務(wù)器使用緩存文件
- 調(diào)用 GetXmlHttpObject 函數(shù)來創(chuàng)建 XMLHTTP 對(duì)象，并在觸發(fā)一個(gè)變化時(shí)告知此函數(shù)執(zhí)行名為 stateChanged 的一個(gè)函數(shù)
- 使用給定的 url 來打開 XMLHTTP 對(duì)象
- 向服務(wù)器發(fā)送 HTTP 請(qǐng)求
stateChanged() 函數(shù)
每當(dāng) XMLHTTP 對(duì)象的狀態(tài)發(fā)生變化時(shí)，該函數(shù)就會(huì)執(zhí)行。
當(dāng)狀態(tài)變?yōu)?4 (或 "complete") 時(shí)，就會(huì)使用響應(yīng)文本來填充 txtHint 占位符的內(nèi)容，并在返回字段周圍設(shè)置一個(gè)邊框。
PHP 頁(yè)面
由 JavaScript 代碼調(diào)用的服務(wù)器頁(yè)面是名為 "livesearch.php" 的 PHP 文件。
"livesearch.php" 中的代碼檢查那個(gè) XML 文檔 "links.xml"。該文檔 jb51.net 上的一些頁(yè)面的標(biāo)題和 URL。
這些代碼會(huì)搜索 XML 文件中匹配搜索字符串的標(biāo)題，并以 HTML 返回結(jié)果：
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
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)
{
//find a link matching the search text
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>";
}
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
例子解釋：
如果從 JavaScript 送來了任何文本 (strlen($q) > 0)，會(huì)發(fā)生：
- PHP 創(chuàng)建 "links.xml" 文件的一個(gè) XML DOM 對(duì)象
- 遍歷所有 "title" 元素 (nodetypes = 1)，以便找到匹配 JavaScript 所傳數(shù)據(jù)的 name
- 找到包含正確 title 的 link，并設(shè)置為 "$response" 變量。如果找到多于一個(gè)匹配，所有的匹配都會(huì)添加到變量
- 如果沒有找到匹配，則把 $response 變量設(shè)置為 "no suggestion"
- $result 是送往 "livesearch" 占位符的輸出