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站點向我們展示了詳細的開發文件：

1. 造訪bing開發者網站： http://bing.com/developers ，這裡也可以找到Bing API在MSDN上的入口
2. 使用微軟的帳號登入（沒有隻能先註冊一個啦）
3. 填寫表格，取得「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">&laquo;</li>
<li id="next">&raquo;</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;