元素。它用作 showResult() 所返回數(shù)據(jù)的占位符

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() 函數(shù)

該函數(shù)每當一個字符輸入文本框就會執(zhí)行一次。

如果文本域中沒有輸入 (str.length == 0)，該函數(shù)把返回字段設置為空，并刪除周圍的任何邊框。

不過，如果文本域中存在輸入，則函數(shù)執(zhí)行：

定義發(fā)送到服務器的 url （文件名）把帶有輸入框內(nèi)容的參數(shù) (q) 添加到 url添加一個隨機數(shù)，以防止服務器使用緩存文件調(diào)用 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 占位符的內(nèi)容，并在返回字段周圍設置一個邊框。

PHP 頁面

由 JavaScript 代碼調(diào)用的服務器頁面是名為 "livesearch.php" 的 PHP 文件。

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

這些代碼會搜索 XML 文件中匹配搜索字符串的標題，并以 HTML 返回結(jié)果：

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)，會發(fā)生：

PHP 創(chuàng)建 "links.xml" 文件的一個 XML DOM 對象遍歷所有 "title" 元素 (nodetypes = 1)，以便找到匹配 JavaScript 所傳數(shù)據(jù)的 name找到包含正確 title 的 link，并設置為 "$response" 變量。如果找到多于一個匹配，所有的匹配都會添加到變量如果沒有找到匹配，則把 $response 變量設置為 "no suggestion"$result 是送往 "livesearch" 占位符的輸出