PHP 和 AJAX Live Search
AJAX 可為用戶提供更友好、交互性更強的搜索體驗。
AJAX Live Search
在下面的 AJAX 例子中,我們將演示一個實時的搜索。
實時的搜索與傳統(tǒng)搜索相比,具有很多優(yōu)勢:
- 當鍵入數(shù)據時,就會顯示出匹配的結果
- 當繼續(xù)鍵入數(shù)據時,對結果進行過濾
- 如果結果太少,刪除字符就可以獲得更寬的范圍
在下面的文本框中搜索 W3School 的頁面
本例包括四個元素:
- 簡單的 HTML 表單
- JavaScript
- PHP 頁面
- XML 文檔
在本例中,結果在一個 XML 文檔 (links.xml) 中進行查找。為了讓這個例子小而簡單,我們只提供 8 個結果。
HTML 表單
這是 HTML 頁面。它包含一個簡單的 HTML 表單,針對此表單的 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 頁面包含一個簡單的 HTML 表單,其中的文本框名為 "txt1"。
表單是這樣工作的:
- 當用戶在文本框中按鍵并松開按鍵時,會觸發(fā)一個事件
- 當事件觸發(fā)時,會執(zhí)行名為 showResult() 的函數(shù)
- 表單下面是名為 "livesearch" 的 <div> 元素。它用作 showResult() 所返回數(shù)據的占位符
JavaScript
JavaScript 代碼存儲在與 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 請求 中的例子相同。
showResult() 函數(shù)
該函數(shù)每當一個字符輸入文本框就會執(zhí)行一次。
如果文本域中沒有輸入 (str.length == 0),該函數(shù)把返回字段設置為空,并刪除周圍的任何邊框。
不過,如果文本域中存在輸入,則函數(shù)執(zhí)行:
- 定義發(fā)送到服務器的 url (文件名)
- 把帶有輸入框內容的參數(shù) (q) 添加到 url
- 添加一個隨機數(shù),以防止服務器使用緩存文件
- 調用 GetXmlHttpObject 函數(shù)來創(chuàng)建 XMLHTTP 對象,并在觸發(fā)一個變化時告知此函數(shù)執(zhí)行名為 stateChanged 的一個函數(shù)
- 使用給定的 url 來打開 XMLHTTP 對象
- 向服務器發(fā)送 HTTP 請求
stateChanged() 函數(shù)
每當 XMLHTTP 對象的狀態(tài)發(fā)生變化時,該函數(shù)就會執(zhí)行。
當狀態(tài)變?yōu)?4 (或 "complete") 時,就會使用響應文本來填充 txtHint 占位符的內容,并在返回字段周圍設置一個邊框。
PHP 頁面
由 JavaScript 代碼調用的服務器頁面是名為 "livesearch.php" 的 PHP 文件。
"livesearch.php" 中的代碼檢查那個 XML 文檔 "links.xml"。該文檔 jb51.net 上的一些頁面的標題和 URL。
這些代碼會搜索 XML 文件中匹配搜索字符串的標題,并以 HTML 返回結果:
<?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),會發(fā)生:
- PHP 創(chuàng)建 "links.xml" 文件的一個 XML DOM 對象
- 遍歷所有 "title" 元素 (nodetypes = 1),以便找到匹配 JavaScript 所傳數(shù)據的 name
- 找到包含正確 title 的 link,并設置為 "$response" 變量。如果找到多于一個匹配,所有的匹配都會添加到變量
- 如果沒有找到匹配,則把 $response 變量設置為 "no suggestion"
- $result 是送往 "livesearch" 占位符的輸出