微软在今年六月正式发布了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站点向我们展示了详细的开发文档：

1. 访问bing开发者站点：http://bing.com/developers，在这里也可以找到Bing API在MSDN上的入口
2. 使用微软的账户登录（没有只能先注册一个啦）
3. 填写表格，获取“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;

出处：css9.net
责任编辑：bluehearts

上一页 下一页 jQuery+Bing API实现简易搜索引擎 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。