AJAX 可為使用者提供更友好、互動性更強的搜尋體驗。
AJAX Live Search在下面的 AJAX 例子中，我們將示範一個即時的搜尋。
即時的搜尋與傳統搜尋相比，具有很多優勢：
本例包括四個元素：
在本例中，結果在一個 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"。
表單是這樣工作的：
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)，該函數把返回欄位設定為空白，並刪除周圍的任何邊框。
不過，如果文本域中存在輸入，則函數執行：
每當 XMLHTTP 對象的狀態發生變化時，該函數就會執行。
當狀態變為 4 (或 "complete") 時，就會使用響應文本來填充 txtHint 預留位置的內容，並在返回欄位周圍設定一個邊框。
PHP 頁面由 JavaScript 代碼調用的伺服器頁面是名為 "livesearch.php" 的 PHP 檔案。
"livesearch.php" 中的代碼檢查那個 XML 文檔 "links.xml"。該文檔 w3school.com.cn 上的一些頁面的標題和 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>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="<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 valuesif ($hint == "") { $response="no suggestion"; }else { $response=$hint; } //output the responseecho $response;?>例子解釋：
如果從 JavaScript 送來了任何文本 (strlen($q) > 0)，會發生：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
