利用PHP＋JavaScript打造AJAX搜尋窗(1)
日期:2006-09-27 作者:喜騰小二 來源:PHPChina
一、 引言
Web世界中一項廣為使用的功能就是搜尋。隨着Web技術的日益發展，為了更好地滿足客戶的需求，常規搜尋
引擎開始對更多的非常規方式"敞開了大門"。在這方麵，Yahoo!率先提供出其Y!Q服務。這個新的服務能夠使妳搜尋任何web页面，前提是該页面的作
者必須包括在他們的web页面中。是服務技術實現了把相關的搜尋結果呈現到讀者眼前，從而嚮讀者展示更多的資訊而不必離開他們的當前页面。
Yahoo!的Y!Q服務的確是一個偉大的想法，但是它的出現也受到了一些批評。原因何在？首先，它要求用戶端必須使用Yahoo!的
Javascript並且妳必須新增一個＜form/＞元素，以便滿足Yahoo!的搜尋要求。對於許多網站作者來說，提供該服務要求付出太多的努力。並
且，在所有這些條件滿足之後，搜尋結果將以Yahoo!風格展現，從而破壞了使用者網站的外觀感覺。
幸運的是，Yahoo!並非唯一的
提供"從妳的網站提供搜尋結果"服務的搜尋引擎。MSN
Search也提供一種類似服務，除了它能夠使web開發者控制外觀感覺以外。這種能力來自於MSN
Search提供它的搜尋結果的RSS版本，從而使得訂閱一個特定的搜尋或使用Ajax方法把該結果新增到妳的页面成為可能。
儘管Google已經率先實現了這種新的"從妳的站點進行搜尋"技術；但是，在本文成文之時，與Google相關的Google BlogSearch Beta也已經能夠以RSS或者Atom格式提供返回的結果。
二、 伺服器端元件
使用MSN Search執行搜尋時，妳會看到一個桔黃色的XML影像出現在結果页面的底部。按這個影像將會把妳帶到一個新的页面，並提供給妳訂閱該搜尋的URL。
這樣以來，妳就可以編寫伺服器端程式碼以檢索遠端饋送。對於本文中的搜尋窗，妳將使用PHP檢索搜尋饋送。來自於伺服器應用程式請求資訊的URL看起來如下所示：
| websearch.php?search=[SEARCHTERM] |
查詢字串隻有一個變數："search"；因此，應用程式應該尋找此查詢項。在伺服器端，妳需要建立一個页面來"拉動"這個資料：
| ＜?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; } ?＞ |
前兩行設定要求的頭部以便浏覽器能夠正確處理資料(XML形式，並且沒有對結果予以緩衝)。下一行程式碼使用isset()函式來決定是否搜尋鍵存在於查詢字串中。
為了把一個合適的請求發送到遠端主機，搜尋術語應該透過許多函式的"篩選"。首先，它被傳遞給stripslashes()函式。如果在PHP配置中啓
動了"magic quotes"(預設情況下是支援的)，那麼，到達PHP引擎的任何引號都會被使用一個斜槓（如，"search
query"）自動地脫掉。該stripslashes()函式負責移除這些符號，僅留下"search
query"。在移除斜槓後，轉到urlencode()函式，由這個函式負責編碼字元以用於查詢字串。空格、引號、"&"等符號都被編碼。
注意 如果搜尋術語不能透過這些函式的"篩選"，那麼，MSN伺服器將返回一個程式碼400-"Bad Request"。
當為轉換搜尋術語準備好後，它被包括到URL中並存儲於$url變數中。最後，file_get_contents()函式負責開啟遠端檔案，讀取其內容並以一個字串形式把它返回到$xml變數中，然後使用echo指令把它列印到页面中。
三、 用戶端元件
本文中的搜尋視窗（Widget）的用戶端程式碼基於一個靜態物件msnWebSearch建立-它被定義為一個沒有任何內容(現在)的物件：
| var msnWebSearch ={}; |
這個物件用於一個HTMLElement的onclick事件中執行搜尋：
| ＜a href="#" onclick='msnWebSearch.search(event，"Professional Ajax"); return false;'＞ Professional Ajax ＜/a＞ |
這個msnWebSearch物件提供若乾取得搜尋結果的方法，並負責繪制和放置包含這些資料的HTML。第一個方法是drawResultBox()，它負責繪制HTML。這個方法形成的HTML如下所示：
| ＜divclass="ajaxWebSearchBox"＞ ＜div class="ajaxWebSearchHeading"＞MSN Search Results ＜a class="ajaxWebSearchCloseLink" href="#"＞X＜/a＞ ＜/div＞ ＜div class="ajaxWebSearchResults"＞ ＜a class="ajaxWebSearchLink" target="_new" /＞ ＜a class="ajaxWebSearchLink" target="_new" /＞ ＜/div＞ ＜/div＞ |
該結果框分為兩部分：一個頭部和一個結果欄(見圖1)。頭部告訴使用者這個新的搜尋窗包含來自一個MSN搜尋的結果。它還包含一個"X"用於關閉該小視窗。其結果欄包含塊風格的連結，當按這些連結時將打一個新的視窗。
圖1.結果框分為兩部分：一個頭部和一個結果欄
