使用jQuery及Bing API實現簡易搜索引擎
微軟在今年六月正式發布了Live搜索的繼承者Bing，同時也提供了一套非常全面的API。如同Google API，通過使用Bing API，Web開發者可以在網站中集成bing搜索中的各種服務，從而豐富網站功能，并為網站帶來流量。CSS9.NET在本篇文章通過一個完整的使用示例，向大家展示如何使用jQuery來調用Bing API實現簡單的Web搜索引擎，并對Bing API有一個基本的了解。
首先我們來感性感受一下：在線示例
Bing API提供了三種檢索結果數據類型：SOAP、XML、JSON，在示例中是通過jQuery ajax調用json數據類型接口展示數據的。下面我們來看它的實現：
準備工作：
微軟通過Bing API站點向我們展示了詳細的開發文檔：
- 訪問bing開發者站點：http://bing.com/developers，在這里也可以找到Bing API在MSDN上的入口
- 使用微軟的賬戶登錄（沒有只能先注冊一個啦）
- 填寫表格，獲取“APP ID”（用來調用API時用的，微軟要確定你是微軟的開發者）
HTML部分
頁面元素很簡單，主要包括檢索入口、結果顯示區域、結果描述、錯誤信息顯示及翻頁導航五部分，下面看HTML：
<div class="line search-content"> <div class="column col-threefifths"> <h3 id="results-header"></h3> <p id="results-summary"></p> <!--結果顯示區域--> <div id="search-result"> <h3>搜索結果</h3> <!-- 結果描述，例如總共多少條，但前是哪些條 --> <div id="result-aggregates" class="results"></div> <ul id="result-list" class="results"> </ul> <!--翻頁導航--> <ul id="result-navigation" class="result-navigation"> <li id="prev">«</li> <li id="next">»</li> </ul> </div> <!--錯誤信息顯示--> <p id="error-list"> </p> </div> <!-- 搜索入口 --> <div class="column last-col"> <h3>輸入搜索詞:</h3> <p> <input id="txtQuery" type="text" title="Search Terms" /> <button id="btnSearch" type="button" title="搜索">搜索</button> </p> </div> </div>
通過jQuery調用Bing API部分
- 定義Bing API需要傳入的一些參數：
//申請的APP ID，這里換成你自己的。 var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186"; //通過用戶輸入搜索詞獲得檢索串 var Query = "Query=" //指定檢索來源類型，Bing提供了網頁、視頻、圖片等所有類型，參考API //這里指定的是網頁類型 var Sources = "Sources=Web"; //指定API版本 var Version = "Version=2.0"; //指定所在地區，如google，每個地區搜索結果是不一樣的，這里指定中國 var Market = "Market=zh-cn"; //一些選項設置，這里開啟搜索結果中的搜索詞高亮 var Options = "Options=EnableHighlighting"; //每頁返回條數 var WebCount = 10; //當前為第幾頁，從0開始的 var WebOffset = 0; - 為搜索按鈕綁定處理方法：
$(function() { $('#btnSearch').click(function() { //這里調用最關鍵的Search方法，取數據 Search(); }); });
- 下面來看最關鍵的Search部分，調用API獲取結果數據：
$(function() { function Search() { //獲取用戶輸入的搜索詞，并替換空格為“+” var searchTerms = $('#txtQuery').val().replace(" ", "+"); //防止傳輸中文時產生亂碼 searchTerms = encodeURI(searchTerms); //將接口需要的所有參數封裝為數組 var arr = [AppId, Query + searchTerms, Sources, Version, Market, Options, "Web.Count=" + WebCount, "Web.Offset=" + WebOffset, "JsonType=callback", "JsonCallback=?"]; //將參數數組拼裝成url串，最終得到bing的URL Service的請求URL var requestStr = "http://api.search.live.net/json.aspx?" + arr.join("&"); //通過jquery ajax調用bing json數據接口 $.ajax({ type: "GET", url: requestStr, //指定數據類型為jsonp dataType: "jsonp", //調用成功后返回數據對象，并調用處理方法 success: function(msg) { SearchCompleted(msg); }, error: function(msg) { alert("Something hasn't worked\n" + msg.d); } }); } });
我們看到在使用jquery ajax時，指定數據類型為jsonp，jsonp是一種可跨域訪問的協議，我對其也不是非常清楚，可以在這里了解一下。另外 CSS9.NET 也計劃在后面的文章中講解json的相關知識，敬請關注。
- 再來看獲取到數據后的UI處理，主要包括顯示結果和顯示錯誤信息兩部分：
function SearchCompleted(response) { //檢查結果數據對象中的Errors對象，判斷是否發生錯誤 var errors = response.SearchResponse.Errors; if (errors != null) { // 發生錯誤的話調用錯誤信息顯示方法 DisplayErrors(errors); } else { // 沒有錯誤的話調用結果信息顯示方法 DisplayResults(response); } }下面是顯示結果方法，因為要改變UI，所以代碼多一點，不過這里可以感受一下jquery中dom操作的靈活。
function DisplayResults(response) { //清空結果列表 $("#result-list").html(""); //清空翻頁導航 $("#result-navigation li").filter(".nav-page").remove(); // 清空結果描述信息 $("#result-aggregates").children().remove(); //獲取結果數據對象 var results = response.SearchResponse.Web.Results; //描述信息部分，即總過多少條，當前是哪些條 $('#result-aggregates').prepend("<p>檢索詞： " + response.SearchResponse.Query.SearchTerms + "</p>"); $('#result-aggregates').prepend("<p id=\"result-count\">當前顯示 " + StartOffset(results) + " 至 " + EndOffset(results) + " 總共:" + parseInt(response.SearchResponse.Web.Total) + "</p>"); //創建結果列表，把每一項要顯示的內容放在一個數組中 var link = []; //因為開啟了搜索詞高亮選項，這里進行高亮匹配 var regexBegin = new RegExp("\uE000", "g"); var regexEnd = new RegExp("\uE001", "g"); for (var i = 0; i < results.length; ++i) { //創建每一結果項的信息 link[i] = "<li><a href=\"" + results[i].Url + "\" title=\"" + results[i].Title + "\">" + results[i].Title + "</a>" + "<p>" + results[i].Description + "<p>" + "<p class=\"result-url\">" + results[i].Url + "</p></li>"; //搜索詞加粗顯示 link[i] = link[i].replace(regexBegin, "<strong>").replace(regexEnd, "</strong>"); } //在頁面結果區域顯示結果列表 $("#result-list").html(link.join('')); //處理導航區域 CreateNavigation(response.SearchResponse.Web.Total, results.length); }
導航部分代碼比較簡單，就不在這里大塊的貼了，直接下載代碼看吧。
下載：示例源碼
另外，在MSDN的bing api部分為開發者提供了非常多的代碼實例，感興趣的可以去看。
—————————————————————————–
有朋友留言提出檢索中文的時候出現亂碼。我又做了測試，如這位朋友所說，在IE中檢索時有亂碼情況，但是在Firefox中正常（我此前只在Firefox下做測試，故未發現）。
出現這種情況，是由于ajax傳輸中文檢索詞時產生亂碼，所以傳遞前需編碼，改正如下：
在function.js中第二十行var searchTerms = $(’#txtQuery’).val().replace(” “, “+”); 后添加下面一句：
searchTerms = encodeURI(searchTerms); //防止傳輸中文時產生亂碼
在線示例及下載源碼已更正，感謝sundy提出問題。
全站熱搜
留言列表
