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，在這裡也可以找到

使用微軟的賬戶登錄(沒有只能先注冊一個啦)

 

 

填寫表格，獲取“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;

為搜索按鈕綁定處理方法：

$(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 = "?" + 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)
            + "&nbsp;&nbsp;總共:" + 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);
    }