Bing API的簡(jiǎn)單了解

2024-07-21 02:04:34

字體：大中小

供稿：網(wǎng)友

微軟在今年六月正式發(fā)布了live搜索的繼承者bing，同時(shí)也提供了一套非常全面的api。如同google api，通過(guò)使用bing api，web開(kāi)發(fā)者可以在網(wǎng)站中集成bing搜索中的各種服務(wù)，從而豐富網(wǎng)站功能，并為網(wǎng)站帶來(lái)流量。css9.net在本篇文章通過(guò)一個(gè)完整的使用示例，向大家展示如何使用jquery來(lái)調(diào)用bing api實(shí)現(xiàn)簡(jiǎn)單的web搜索引擎，并對(duì)bing api有一個(gè)基本的了解。

bing api提供了三種檢索結(jié)果數(shù)據(jù)類型：soap、xml、json，在示例中是通過(guò)jquery ajax調(diào)用json數(shù)據(jù)類型接口展示數(shù)據(jù)的。下面我們來(lái)看它的實(shí)現(xiàn)：

準(zhǔn)備工作：

微軟通過(guò)bing api站點(diǎn)向我們展示了詳細(xì)的開(kāi)發(fā)文檔：

訪問(wèn)bing開(kāi)發(fā)者站點(diǎn)：http://bing.com/developers，在這里也可以找到bing api在msdn上的入口
使用微軟的賬戶登錄（沒(méi)有只能先注冊(cè)一個(gè)啦）
填寫表格，獲取“app id”（用來(lái)調(diào)用api時(shí)用的，微軟要確定你是微軟的開(kāi)發(fā)者）

html部分

頁(yè)面元素很簡(jiǎn)單，主要包括檢索入口、結(jié)果顯示區(qū)域、結(jié)果描述、錯(cuò)誤信息顯示及翻頁(yè)導(dǎo)航五部分，下面看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>搜索結(jié)果</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>

通過(guò)jquery調(diào)用bing api部分

定義bing api需要傳入的一些參數(shù)：     //申請(qǐng)的app id，這里換成你自己的。
    var appid = "appid=31f3c13dc5d41c42d4a18f9e04de1dea73762186";
    //通過(guò)用戶輸入搜索詞獲得檢索串
    var query = "query="
    //指定檢索來(lái)源類型，bing提供了網(wǎng)頁(yè)、視頻、圖片等所有類型，參考api
    //這里指定的是網(wǎng)頁(yè)類型
    var sources = "sources=web";
    //指定api版本
    var version = "version=2.0";
    //指定所在地區(qū)，如google，每個(gè)地區(qū)搜索結(jié)果是不一樣的，這里指定中國(guó)
    var market = "market=zh-cn";
    //一些選項(xiàng)設(shè)置，這里開(kāi)啟搜索結(jié)果中的搜索詞高亮
    var options = "options=enablehighlighting";
    //每頁(yè)返回條數(shù)
    var webcount = 10;
    //當(dāng)前為第幾頁(yè)，從0開(kāi)始的
    var weboffset = 0;

|||

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

$(function() {
    $('#btnsearch').click(function() {
//這里調(diào)用最關(guān)鍵的search方法，取數(shù)據(jù)
        search();
    });
});

下面來(lái)看最關(guān)鍵的search部分，調(diào)用api獲取結(jié)果數(shù)據(jù)：

$(function() {
function search() {

//獲取用戶輸入的搜索詞，并替換空格為“+”
        var searchterms = $('#txtquery').val().replace(" ", "+");

//將接口需要的所有參數(shù)封裝為數(shù)組
        var arr = [appid, query + searchterms, sources, version, market, options, "web.count=" + webcount, "web.offset=" + weboffset, "jsontype=callback", "jsoncallback=?"];

//將參數(shù)數(shù)組拼裝成url串，最終得到bing的url service的請(qǐng)求url
        var requeststr = "http://api.search.live.net/json.aspx?" + arr.join("&");

//通過(guò)jquery ajax調(diào)用bing json數(shù)據(jù)接口
        $.ajax({
            type: "get",
            url: requeststr,
//指定數(shù)據(jù)類型為jsonp
            datatype: "jsonp",

//調(diào)用成功后返回?cái)?shù)據(jù)對(duì)象，并調(diào)用處理方法
            success: function(msg) {
                searchcompleted(msg);
            },
            error: function(msg) {
                alert("something hasn't worked/n" + msg.d);
            }
        });
    }
});

我們看到在使用jquery ajax時(shí)，指定數(shù)據(jù)類型為jsonp，jsonp是一種可跨域訪問(wèn)的協(xié)議，我對(duì)其也不是非常清楚，可以在這里了解一下。另外 css9.net 也計(jì)劃在后面的文章中講解json的相關(guān)知識(shí)，敬請(qǐng)關(guān)注。

再來(lái)看獲取到數(shù)據(jù)后的ui處理，主要包括顯示結(jié)果和顯示錯(cuò)誤信息兩部分：

|||

下面是顯示結(jié)果方法，因?yàn)橐淖僽i，所以代碼多一點(diǎn)，不過(guò)這里可以感受一下jquery中dom操作的靈活。

    function displayresults(response) {
//清空結(jié)果列表
        $("#result-list").html("");
//清空翻頁(yè)導(dǎo)航
        $("#result-navigation li").filter(".nav-page").remove();
// 清空結(jié)果描述信息
        $("#result-aggregates").children().remove();

//獲取結(jié)果數(shù)據(jù)對(duì)象
        var results = response.searchresponse.web.results;

//描述信息部分，即總過(guò)多少條，當(dāng)前是哪些條
        $('#result-aggregates').prepend("<p>檢索詞： " + response.searchresponse.query.searchterms + "</p>");
        $('#result-aggregates').prepend("<p id=/"result-count/">當(dāng)前顯示 " + startoffset(results)
            + " 至 " + endoffset(results)
            + "  總共:" + parseint(response.searchresponse.web.total) + "</p>");

//創(chuàng)建結(jié)果列表，把每一項(xiàng)要顯示的內(nèi)容放在一個(gè)數(shù)組中
        var link = [];
//因?yàn)殚_(kāi)啟了搜索詞高亮選項(xiàng)，這里進(jìn)行高亮匹配
        var regexbegin = new regexp("/ue000", "g");
        var regexend = new regexp("/ue001", "g");
        for (var i = 0; i < results.length; ++i) {
//創(chuàng)建每一結(jié)果項(xiàng)的信息
            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>");
        }
//在頁(yè)面結(jié)果區(qū)域顯示結(jié)果列表
       $("#result-list").html(link.join(''));

//處理導(dǎo)航區(qū)域
        createnavigation(response.searchresponse.web.total, results.length);
    }