利用PHP＋JavaScript打造AJAX搜索窗

2019-11-18 16:59:13

字體：大中小

供稿：網(wǎng)友

　　一、引言

　　Web世界中一項(xiàng)廣為使用的功能就是搜索。隨著Web技術(shù)的日益發(fā)展，為了更好地滿足客戶的需求，常規(guī)搜索引擎開始對更多的非常規(guī)方式"敞開了大門"。在這方面，Yahoo!率先提供出其Y!Q服務(wù)。這個(gè)新的服務(wù)能夠使你搜索任何web頁面，前提是該頁面的作者必須包括在他們的web頁面中。是服務(wù)技術(shù)實(shí)現(xiàn)了把相關(guān)的搜索結(jié)果呈現(xiàn)到讀者眼前，從而向讀者展示更多的信息而不必離開他們的當(dāng)前頁面。

　　Yahoo!的Y!Q服務(wù)的確是一個(gè)偉大的想法，但是它的出現(xiàn)也受到了一些批評。原因何在？首先，它要求客戶端必須使用Yahoo!的javaScrrss版本，從而使得訂閱一個(gè)特定的搜索或使用Ajax方法把該結(jié)果添加到你的頁面成為可能。

　　盡管Google已經(jīng)率先實(shí)現(xiàn)了這種新的"從你的站點(diǎn)進(jìn)行搜索"技術(shù)；但是，在本文成文之時(shí)，與Google相關(guān)的Google BlogSearch Beta也已經(jīng)能夠以RSS或者Atom格式提供返回的結(jié)果。

　　二、服務(wù)器端組件

　　使用MSN Search執(zhí)行搜索時(shí)，你會看到一個(gè)桔黃色的xml圖像出現(xiàn)在結(jié)果頁面的底部。點(diǎn)擊這個(gè)圖像將會把你帶到一個(gè)新的頁面，并提供給你訂閱該搜索的URL。

　　這樣以來，你就可以編寫服務(wù)器端代碼以檢索遠(yuǎn)程饋送。對于本文中的搜索窗，你將使用php檢索搜索饋送。來自于服務(wù)器應(yīng)用程序請求信息的URL看起來如下所示：

websearch.php?search=[SEARCHTERM]

　　查詢字符串只有一個(gè)變量："search"；因此，應(yīng)用程序應(yīng)該查找此查詢項(xiàng)。在服務(wù)器端，你需要創(chuàng)建一個(gè)頁面來"拉動"這個(gè)數(shù)據(jù)：

＜?php
header("Content-Type: text/xml");
header("Cache-Control: no-cache");if ( isset($_GET["search"]) )
{
　$searchTerm = urlencode( stripslashes($_GET["search"]) );
　$url = "http://search.msn.com/results.aspx?q=$searchTerm&format=rss";
　$xml = file_get_contents($url);
　echo $xml;
}
?＞

　　前兩行設(shè)置要求的頭部以便瀏覽器能夠正確處理數(shù)據(jù)(XML形式，并且沒有對結(jié)果予以緩沖)。下一行代碼使用isset()函數(shù)來決定是否搜索鍵存在于查詢字符串中。

　　為了把一個(gè)合適的請求發(fā)送到遠(yuǎn)程主機(jī)，搜索術(shù)語應(yīng)該通過許多函數(shù)的"過濾"。首先，它被傳遞給stripslashes()函數(shù)。如果在PHP配置中啟動了"magic quotes"(缺省情況下是支持的)，那么，到達(dá)PHP引擎的任何引號都會被使用一個(gè)斜杠（如，/"search query/"）自動地脫掉。該stripslashes()函數(shù)負(fù)責(zé)刪除這些符號，僅留下"search query"。在刪除斜杠后，轉(zhuǎn)到urlencode()函數(shù)，由這個(gè)函數(shù)負(fù)責(zé)編碼字符以用于查詢字符串?？崭瘛⒁?、"&"等符號都被編碼。

　　注意如果搜索術(shù)語不能通過這些函數(shù)的"過濾"，那么，MSN服務(wù)器將返回一個(gè)代碼400-"Bad Request"。

　　當(dāng)為轉(zhuǎn)換搜索術(shù)語準(zhǔn)備好后，它被包括到URL中并存儲于$url變量中。最后，file_get_contents()函數(shù)負(fù)責(zé)打開遠(yuǎn)程文件，讀取其內(nèi)容并以一個(gè)字符串形式把它返回到$xml變量中，然后使用echo命令把它打印到頁面中。

　　三、客戶端組件

　　本文中的搜索窗口（Widget）的客戶端代碼基于一個(gè)靜態(tài)對象msnWebSearch創(chuàng)建-它被定義為一個(gè)沒有任何屬性(現(xiàn)在)的對象：

var msnWebSearch ={};

　　這個(gè)對象用于一個(gè)HTMLElement的onclick事件中執(zhí)行搜索：

＜a href="#"
onclick='msnWebSearch.search(event，"PRofessional Ajax"); return false;'＞
Professional Ajax
＜/a＞

　　這個(gè)msnWebSearch對象提供若干取得搜索結(jié)果的方法，并負(fù)責(zé)繪制和放置包含這些數(shù)據(jù)的HTML。第一個(gè)方法是drawResultBox()，它負(fù)責(zé)繪制HTML。這個(gè)方法形成的HTML如下所示：

＜divclass="ajaxWebSearchBox"＞
?。糳iv class="ajaxWebSearchHeading"＞MSN Search Results
?。糰 class="ajaxWebSearchCloseLink" href="#"＞X＜/a＞
＜/div＞
＜div class="ajaxWebSearchResults"＞
?。糰 class="ajaxWebSearchLink" target="_new" /＞
?。糰 class="ajaxWebSearchLink" target="_new" /＞
＜/div＞
＜/div＞

　　該結(jié)果框分為兩部分：一個(gè)頭部和一個(gè)結(jié)果欄(見圖1)。頭部告訴用戶這個(gè)新的搜索窗包含來自一個(gè)MSN搜索的結(jié)果。它還包含一個(gè)"X"用于關(guān)閉該小窗口。其結(jié)果欄包含塊風(fēng)格的鏈接，當(dāng)點(diǎn)擊這些鏈接時(shí)將打一個(gè)新的窗口。

圖1.結(jié)果框分為兩部分：一個(gè)頭部和一個(gè)結(jié)果欄

　　四、繪制結(jié)果用戶接口

　　生成這個(gè)HTML的代碼相當(dāng)長，因?yàn)槠渲械脑囟际鞘褂肈OM方法生成的。drawResultBox()方法接受一個(gè)參數(shù)（一個(gè)事件對象）：

　　前面這些代碼經(jīng)由createElement()方法創(chuàng)建HTML元素。在創(chuàng)建這些元素后，你就能夠開始賦予它們屬性。上面完成終結(jié)（封尾）的兩個(gè)元素分別是aCloseLink和divHeading：

aCloseLink.href = "#";
aCloseLink.className = "ajaxWebSearchCloseLink";
aCloseLink.onclick = this.close;
aCloseLink.appendChild(document.createTextNode("X"));
divHeading.className = "ajaxWebSearchHeading";
divHeading.appendChild(document.createTextNode("MSN Search Results"));
divHeading.appendChild(aCloseLink);

　　前四行完成關(guān)閉結(jié)果框的鏈接。其中，方法close()成為鏈接的onclick事件的處理器。后面的幾行代碼負(fù)責(zé)使用文本和關(guān)閉鏈接填充頭部的＜div/＞。

　　當(dāng)這個(gè)結(jié)果框被繪制到頁面上時(shí)，還沒有接收到來自于一個(gè)服務(wù)器應(yīng)用程序的響應(yīng)。為了向用戶展示已經(jīng)發(fā)生了什么，可以向用戶展示一個(gè)消息提示數(shù)據(jù)正在加載中（這種方式更友好些）(見圖2)。為此，創(chuàng)建另一個(gè)元素并且把它添加到divResultsPane元素：

var divLoading = document.createElement("div");
divLoading.appendChild(document.createTextNode("Loading Search Feed"));

divResultsPane.className = "ajaxWebSearchResults";
divResultsPane.appendChild(divLoading);

　　這個(gè)代碼創(chuàng)建加載消息并且把它添加到divResultsPane，同時(shí)還把類名賦給divResultsPane。

圖2.向用戶提示數(shù)據(jù)正在加載中

　　完成這些元素之后，剩下的就是把它們添加到divSearchBox元素中：

divSearchBox.className = "ajaxWebSearchBox";
divSearchBox.appendChild(divHeading);
divSearchBox.appendChild(divResultsPane);
document.body.appendChild(divSearchBox);

　　這段代碼負(fù)責(zé)把divHeading和divResultsPane元素添加到搜索窗，并且把搜索窗添加到頁面。

　　在drawResultBox()中的最后一步是確定新繪制的小框的位置并且把divSearchBox返回到它的調(diào)用者：

msnWebSearch.drawResultBox = function (e) {
　var divSearchBox= document.createElement("div");
　var divHeading = document.createElement("div");
　var divResultsPane = document.createElement("div");
　var aCloseLink = document.createElement("a");
　aCloseLink.href = "#";
　aCloseLink.className = "ajaxWebSearchCloseLink";
　aCloseLink.onclick = this.close;
　aCloseLink.appendChild(document.createTextNode("X"));
　divHeading.className = "ajaxWebSearchHeading";
　divHeading.appendChild(document.createTextNode("MSN Search Results"));
　divHeading.appendChild(aCloseLink);
　var divLoading = document.createElement("div");
　divLoading.appendChild(document.createTextNode("Loading Search Feed"));
　divResultsPane.className = "ajaxWebSearchResults";
　divResultsPane.appendChild(divLoading);
　divSearchBox.className = "ajaxWebSearchBox";
　divSearchBox.appendChild(divHeading);
　divSearchBox.appendChild(divResultsPane);
　document.body.appendChild(divSearchBox);
　this.position(e， divSearchBox);
　return divSearchBox;
};

　　通過這種方式建立msnWebSearch對象后，必須把divSearchBox返回到它的調(diào)用者以便進(jìn)行其它操作。你可以已經(jīng)猜出，position()方法負(fù)責(zé)放置該搜索框。它接受兩個(gè)參數(shù)：傳遞到drawResultBox()的事件對象和divSearchBox元素：

msnWebSearch.position = function (e， divSearchBox) {
　var x = e.clientX + document.documentElement.scrollLeft;
　var y = e.clientY + document.documentElement.scrollTop;
　divSearchBox.style.left = x + "px";
　divSearchBox.style.top = y + "px";
};

　　前兩行代碼得到左邊和頂部位置，用于放置搜索結(jié)果框。執(zhí)行這個(gè)操作要求使用兩種信息。首先是鼠標(biāo)的x和y坐標(biāo)（這些信息被存儲在clientX和clientY屬性）。

　　然而，這些坐標(biāo)還不足以正確定位結(jié)果框，因?yàn)閏lientX和clientY屬性返回相對于瀏覽器窗口客戶區(qū)的鼠標(biāo)位置，而不是頁面中的實(shí)際坐標(biāo)?？紤]到這一點(diǎn)，我們可以使用文檔元素的scrollLeft和scrollTop屬性。計(jì)算出最后的坐標(biāo)后，你能夠最后確定用戶點(diǎn)擊鼠標(biāo)的框中的位置。
　　五、顯示結(jié)果

　　populateResults()方法負(fù)責(zé)使用搜索結(jié)果填充結(jié)果欄。它接受兩個(gè)參數(shù)：包含該結(jié)果的元素和一個(gè)XParser對象(XParser是一個(gè)基于Javascript的RSS讀取器，可從www.wdonline.com/javascript/xparser/自由下載):

msnWebSearch.populateResults = function(divResultsPane，oParser){
　var oFragment = document.createDocumentFragment();

　divResultsPane.removeChild(divResultsPane.firstChild);

　　這個(gè)方法以編程方式并通過DOM方法生成＜a/＞元素；這樣以來，這些元素將被添加到一個(gè)在第一行創(chuàng)建的文檔片斷中。下一行刪除添加在drawResultBox()中的正加載的＜div/＞元素。

　　下一步是創(chuàng)建這個(gè)鏈接：

for (var i = 0; i ＜ oParser.items.length; i++) {
　var oItem = oParser.items[i];

　var aResultLink = document.createElement("a");
　aResultLink.href = oItem.link.value;
　aResultLink.className = "ajaxWebSearchLink";
　aResultLink.target = "_new";
　aResultLink.appendChild(document.createTextNode(oItem.title.value));

　oFragment.appendChild(aResultLink);
}

　　這段代碼遍歷回饋的各個(gè)項(xiàng)，并且由該數(shù)據(jù)生成鏈接并把＜a/＞元素添加到文檔片斷最后。

　　當(dāng)退出循環(huán)時(shí)，該文檔片斷被添加到divResultsPane以顯示搜索結(jié)果:

divResultsPane.appendChild(oFragment);

　　六、關(guān)閉結(jié)果框

　　為了關(guān)閉搜索結(jié)果框，msnWebSearch對象提供了close()方法。close()方法負(fù)責(zé)處理該鏈接的onclick事件（關(guān)閉該小框）：

msnWebSearch.close = function () {
　var divSearchBox = this.parentNode.parentNode;
　document.body.removeChild(divSearchBox);

　return false;
};

　　該搜索框其實(shí)并沒有關(guān)閉；事實(shí)上，它被從該文檔中刪除了。為此，需要檢索divSearchBox元素。第一行代碼完成這一任務(wù)-通過檢索這個(gè)元素的父結(jié)點(diǎn)的父結(jié)點(diǎn)實(shí)現(xiàn)。因?yàn)閏lose()負(fù)責(zé)處理onclick事件，所以this引用這一鏈接。下一行從文檔中刪除divSearchBox元素。最后一行，返回false，從而強(qiáng)迫瀏覽器不要沿用一個(gè)鏈接的缺省行為（轉(zhuǎn)到在href屬性中標(biāo)注的位置）。

　　七、構(gòu)建搜索接口

　　msnWebSearch對象的最后一個(gè)方法是search()，它提供執(zhí)行一個(gè)搜索的接口。你可以使用一個(gè)元素的onclick事件來調(diào)用search()。它接受兩個(gè)方法：一個(gè)事件對象和搜索術(shù)語：

msnWebSearch.search = function (e，sSearchTerm) {
　var divSearchBox = this.drawResultBox(e);
　var url = encodeURI("websearch.php?search=" + sSearchTerm);
　var oParser = new XParser(url);
　oParser.onload = function () {
　　msnWebSearch.populateResults(divSearchBox.childNodes[1]，oParser);
　};
};

　　第一行調(diào)用drawResultBox()方法并且把事件e傳遞給它。下一行編碼該URL以實(shí)現(xiàn)合適的轉(zhuǎn)換。這個(gè)URL被傳遞給XParser構(gòu)造器以創(chuàng)建一個(gè)新的分析器。當(dāng)搜索回饋完成加載并使用結(jié)果填充搜索框時(shí)，該分析器的onload事件處理器調(diào)用populateResult()方法。
當(dāng)然，構(gòu)建這個(gè)搜索框的一個(gè)理由是，使其更適合于你自己的站點(diǎn)的外觀。

　　八、定制Web搜索框

　　借助于CSS，你可以容易地為你的現(xiàn)有站點(diǎn)定制搜索框，并且使你以后的任何重新設(shè)計(jì)都變得非常容易。

　　首先要討論的CSS類是ajaxWebSearchBox（該類實(shí)現(xiàn)搜索框）。因?yàn)樗阉骺蛞_定位置，所以它必須要有一個(gè)絕對位置：

.ajaxWebSearchBox
{
　position: absolute;
　background-color: #0d1e4a;
　width: 500px;
　padding: 1px;
}

　　在此，絕對位置是唯一的要求。所有的其它屬性都是根據(jù)你的口味可選的。在這個(gè)示例中，該框有一個(gè)微藍(lán)色的背景，一個(gè)500像素的寬度，以及在四邊上各有1個(gè)像素的填充。這個(gè)填充導(dǎo)致圍繞該框的內(nèi)容的是1個(gè)像素寬的邊界。

　　下一個(gè)類是ajaxWebSearchHeading，它包含該框的頭部文本和關(guān)閉鏈接。為了把關(guān)閉鏈接放在右上角，它使用絕對位置。因?yàn)檫@個(gè)原因，它要求ajaxWebSearchHeading使用一個(gè)相對位置：

.ajaxWebSearchHeading
{
　position: relative;
　background-color: #1162cc;
　font: bold 14px tahoma;
　height: 21px;
　color: white;
　padding: 3px 0px 0px 2px;
}

　　在此，唯一要求的屬性也是position屬性。其它的屬性有助于給出該元素一個(gè)好看的外觀。其背景顏色是淺藍(lán)色，而文本部分是白色，14像素高且是Tahoma字體。該元素的高度是21個(gè)像素并且在頂部和左邊都填充以邊界。

　　如前面所述，該關(guān)閉鏈接的位置是絕對的：

a.ajaxWebSearchCloseLink
{
　position: absolute;
　right: 5px;
　top: 3px;
　text-decoration: none;
　color: white;
}
a:hover.ajaxWebSearchCloseLink
{
　color: red;
}

　　該元素被放置在距右邊5個(gè)像素，距頂部3個(gè)像素的位置（該元素被放在右上角）。這個(gè)鏈接沒有任何文本修飾并且顏色呈白色。當(dāng)用戶的鼠標(biāo)停在該鏈接上時(shí)，文本顏色變紅。

　　注意，這里沒有使用訪問過的或活動的"假"類。這是因?yàn)樵摯翱诳偸呛雎赃@個(gè)鏈接的href屬性(它已經(jīng)在它的事件處理器中返回了false)。因此，該鏈接從來不會真正處于活動或被訪問狀態(tài)。

　　然后，ajaxWebSearchResults類使結(jié)果欄的風(fēng)格如下：

.ajaxWebSearchResults
{
　background-color: #d3e5fa;
　padding: 5px;
}

　　這個(gè)元素不要求使用CSS屬性?，F(xiàn)有屬性僅用于定義結(jié)果欄并且使它比較容易讀取。背景顏色是一個(gè)淺藍(lán)色并且圍繞邊緣有5個(gè)像素的填充。當(dāng)然，你能夠定制加載消息的風(fēng)格：

.ajaxWebSearchResults div
{
　text-align: center;
　font: bold 14px tahoma;
　color:#0a246a;
}

　　這個(gè)元素沒有一個(gè)類名，但是你仍然能夠通過使用前面的示例中展示的parent child標(biāo)志控制它的風(fēng)格。這個(gè)示例把文本放置在＜div/＞元素的中央，并且給它一個(gè)加粗藍(lán)色的字體，且有14個(gè)像素高。

　　最后一個(gè)你需要風(fēng)格化的元素是結(jié)果鏈接。這些鏈接有一個(gè)類名叫ajaxWebSearchLink：

a.ajaxWebSearchLink
{
　font: 12px tahoma;
　padding: 2px;
　display: block;
　color: #0a246a;
}
a:hover.ajaxWebSearchLink
{
　color: white;
　background-color: #316ac5;
}
a:visited.ajaxWebSearchLink
{
　color: purple;
}

　　唯一要求的屬性是display屬性（被設(shè)置為block）。這使每一個(gè)鏈接都能夠在它自己的行上顯示。填充空白部分大約有兩個(gè)像素寬，使各個(gè)鏈接之間分開一些，從而使它們更易于讀取。字體名為Tahoma并且有12像素高。它們的顏色是暗藍(lán)色，與ajaxWebSearchResults的淺藍(lán)色背景形成對照。

　　當(dāng)用戶在這些鏈接上移動鼠標(biāo)時(shí)，背景顏色被設(shè)置為藍(lán)色，而文本顏色改變?yōu)榘咨?

　　在前面的代碼的最后一條規(guī)則中訪問過的"假"類被設(shè)置。這是為了給用戶提供用戶接口暗示-它們已經(jīng)被使用過。通過把訪問過的"假"類設(shè)置為顯示一種紫色，用戶就可以知道它們已經(jīng)訪問過那個(gè)鏈接，從而節(jié)省他們的時(shí)間-不必再訪問一個(gè)他們可能不想看的頁面。

　　現(xiàn)在，讓我們來看一下如何實(shí)現(xiàn)搜索框。

　　九、實(shí)現(xiàn)Web搜索搜索框

　　實(shí)現(xiàn)這個(gè)搜索框是很簡單的。首先，你必須把websearch.php文件上傳到你的web服務(wù)器(當(dāng)然，必須安裝PHP)。然后，你需要一個(gè)HTML文檔來引用所有的組件。msnWebSearch對象依賴于XParser類，這個(gè)類又依賴于zXml庫(可從www.nczonline.net/downloads/下載)。你必須引用下面這些文件：

　　為了執(zhí)行搜索，應(yīng)該把msnWebSearch.search()方法設(shè)置為該元素的onclick處理器：

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞Ajax WebSearch＜/title＞
＜link rel="stylesheet" type="text/css" href="css/websearch.css" /＞
＜script type="text/javascript" src="js/zxml.js"＞＜/script＞
＜script type="text/javascript" src="js/xparser.js"＞＜/script＞
＜script type="text/javascript" src="js/websearch.js"＞＜/script＞
＜/head＞＜body＞
＜a href="#" onclick='msnWebSearch.search(event，"/"Professional Ajax/"");
return false;'＞Search for "Professional Ajax"＜/a＞
＜br /＞＜br /＞＜br /＞＜br /＞
＜a href="#" onclick='msnWebSearch.search(event，"Professional Ajax");
return false;'＞Search for Professional Ajax＜/a＞
＜/body＞
＜/html＞

　　第一個(gè)新的鏈接執(zhí)行一個(gè)針對準(zhǔn)確詞組"Professional Ajax"的搜索，而第二個(gè)鏈接將搜索這其中的各個(gè)單詞。還要注意，在onclick事件中返回的是false-這強(qiáng)迫瀏覽器忽略掉href屬性。點(diǎn)擊這些鏈接將在光標(biāo)位置繪制搜索框，并且就在此處顯示你的搜索結(jié)果。

上一篇：結(jié)合ASP.NET與JavaScript開發(fā)電子沙盤

下一篇：ASP.Net中無法用javascript實(shí)現(xiàn)圖片隨屏幕移動的解決辦法