網頁制作poluoluo文章簡介：Bing API提供了三種檢索結果數據類型：SOAP、XML、JSON，在示例中是通過jQuery ajax調用json數據類型接口展示數據的。
微軟在今年六月正式發布了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站點向我們展示了詳細的開發文檔：
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;
網頁制作poluoluo文章簡介：Bing API提供了三種檢索結果數據類型：SOAP、XML、JSON，在示例中是通過jQuery ajax調用json數據類型接口展示數據的。
為搜索按鈕綁定處理方法：
$(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=?"];
//將參數數組拼裝成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);
}
}
網頁制作poluoluo文章簡介：Bing API提供了三種檢索結果數據類型：SOAP、XML、JSON，在示例中是通過jQuery ajax調用json數據類型接口展示數據的。
下面是顯示結果方法，因為要改變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部分為開發者提供了非常多的代碼實例，感興趣的可以去看。