|
微軟在今年六月正式發布了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>
it知識庫:使用jQuery及Bing API實現簡易搜索引擎,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。