自微軟正式發布了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，在這裡也可以找到
使用微軟的賬戶登錄(沒有只能先注冊一個啦)
填寫表格，獲取“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">
通過jQuery調用Bing API部分
定義Bing API需要傳入的一些參數： //申請的APP ID，這裡換成你自己的。
var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
//通過用戶輸入搜索詞獲得檢索串
var Query = "Query="
//指定檢索來源類型，Bing提供了網頁、視頻、圖片等所有類型，參考API
//這裡指定的是網頁類型
var Sources = "Sources=Web";
為搜索按鈕綁定處理方法：
$(function() {
$('#btnSearch').click(function() {
//這裡調用最關鍵的Search方法，取數據
Search();
});
});
下面來看最關鍵的Search部分，調用API獲取結果數據：
$(function() {
function Search() {
//獲取用戶輸入的搜索詞，並替換空格為“+”
var searchTerms = $('#txtQuery').val().replace(" ", "+");
//將接口需要的所有參數封裝為數組
var arr = [AppId, Query + searchTerms, Sources, Version, Market, Options, "Web.Count=" + WebCount, "Web.Offset=" + WebOffset, "JsonType=callback", "JSonCallback=?"];
我們看到在使用jquery AJax時，指定數據類型為jsonp，JSonp是一種可跨域訪問的協議，我對其也不是非常清楚，可以在這裡了解一下。另外 CSS9.Net 也計劃在後面的文章中講解JSon的相關知識，敬請關注。
再來看獲取到數據後的UI處理，主要包括顯示結果和顯示錯誤信息兩部分：
function SearchCompleted(response) {
//檢查結果數據對象中的Errors對象，判斷是否發生錯誤
var errors = response.SearchResponse.Errors;
if (errors != null) {
// 發生錯誤的話調用錯誤信息顯示方法
DisplayErrors(errors);
}
else {
下面是顯示結果方法，因為要改變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);
}