PHP 和 AJAX Live Search

AJAX 可為使用者提供更友好、互動性更強的搜尋體驗。

AJAX Live Search

在下面的 AJAX 例子中，我們將示範一個即時的搜尋。

即時的搜尋與傳統搜尋相比，具有很多優勢：

當鍵入資料時，就會顯示出匹配的結果 當繼續鍵入資料時，對結果進行過濾 如果結果太少，刪除字元就可以獲得更寬的範圍

在下面的文字框中搜尋 W3School 的頁面

本例包括四個元素：

簡單的 HTML 表單 JavaScript PHP 頁面 XML 文檔

在本例中，結果在一個 XML 文檔 (links.xml) 中進行尋找。為了讓這個例子小而簡單，我們只提供 8 個結果。

HTML 表單

這是 HTML 頁面。它包含一個簡單的 HTML 表單，針對此表單的 CSS 樣式，以及指向 JavaScript 的連結：

例子解釋 - HTML 表單

正如你看到的，HTML 頁麵包含一個簡單的 HTML 表單，其中的文字框名為 "txt1"。

表單是這樣工作的：

當使用者在文字框中按鍵並鬆開按鍵時，會觸發一個事件 當事件觸發時，會執行名為 showResult() 的函數 表單下面是名為 "livesearch" 的 元素。它用作 showResult() 所返回資料的預留位置

JavaScript

JavaScript 代碼儲存在與 HTML 文檔串連的 "livesearch.js" 中：

var xmlHttpfunction 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="+strurl=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() 函數

該函數每當一個字元輸入文字框就會執行一次。

如果文本域中沒有輸入 (str.length == 0)，該函數把返回欄位設定為空白，並刪除周圍的任何邊框。

不過，如果文本域中存在輸入，則函數執行：

定義發送到伺服器的 url （檔案名稱） 把帶有輸入框內容的參數 (q) 添加到 url 添加一個隨機數，以防止伺服器使用快取檔案 調用 GetXmlHttpObject 函數來建立 XMLHTTP 對象，並在觸發一個變化時告知此函數執行名為 stateChanged 的一個函數 使用給定的 url 來開啟 XMLHTTP 對象 向伺服器發送 HTTP 要求 stateChanged() 函數

每當 XMLHTTP 對象的狀態發生變化時，該函數就會執行。

當狀態變為 4 (或 "complete") 時，就會使用響應文本來填充 txtHint 預留位置的內容，並在返回欄位周圍設定一個邊框。

PHP 頁面

由 JavaScript 代碼調用的伺服器頁面是名為 "livesearch.php" 的 PHP 檔案。

"livesearch.php" 中的代碼檢查那個 XML 文檔 "links.xml"。該文檔 w3school.com.cn 上的一些頁面的標題和 URL。

這些代碼會搜尋 XML 檔案中匹配搜尋字串的標題，並以 HTML 返回結果：

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>0if (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="item(0)->childNodes->item(0)->nodeValue .     "' target='_blank'>" .     $y->item(0)->childNodes->item(0)->nodeValue . "";    }   else    {    $hint=$hint . "
item(0)->childNodes->item(0)->nodeValue .     "' target='_blank'>" .     $y->item(0)->childNodes->item(0)->nodeValue . "";    }   }  } }}// Set output to "no suggestion" if no hint were found// or to the correct valuesif ($hint == "") { $response="no suggestion"; }else { $response=$hint; } //output the responseecho $response;?>

例子解釋：

如果從 JavaScript 送來了任何文本 (strlen($q) > 0)，會發生：

PHP 建立 "links.xml" 檔案的一個 XML DOM 對象 遍曆所有 "title" 元素 (nodetypes = 1)，以便找到匹配 JavaScript 所傳資料的 name 找到包含正確 title 的 link，並設定為 "$response" 變數。如果找到多於一個匹配，所有的匹配都會添加到變數 如果沒有找到匹配，則把 $response 變數設定為 "no suggestion" $result 是送往 "livesearch" 預留位置的輸出

