怎样使用jQuery来调用Bing

发布时间：2022-03-03 10:41 所属栏目：21 来源：互联网

导读：

导读：微软在今年六月正式发布了live搜索的继承者bing，同时也提供了一套非常全面的api。如同google api，通过使用bing api，web开发者可以在网站中集成bing搜索中的各种服务，从而丰富网站功能，并为网站带来流量。css9.net在本篇文章通过一个完整的使用示例，向

微软在今年六月正式发布了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处理，主要包括显示结果和显示错误信息两部分：

　　    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)
　　            + "  总共:" + 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);
　　    }

　　导航部分代码比较简单，就不在这里大块的贴了，直接下载代码看吧。

（编辑：ASP站长网）