jQuery+Bing API实现简易搜索引擎

发布日期: 2009.07.03 浏览：1359次 关键字： 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，在这里也可以找到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>

通过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 = "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处理，主要包括显示结果和显示错误信息两部分：

下面是显示结果方法，因为要改变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部分为开发者提供了非常多的代码实例，感兴趣的可以去看。

上一条：jQuery性能优化指南

下一条：jquery自定义事件

jQuery+Bing API实现简易搜索引擎

相关新闻

web设计

Top 10

Hot 10