怎样使用jQuery来调用Bing
发布时间：2022-03-03 11:17:16 所属栏目：优化 来源：互联网
导读：微软在今年六月正式发布了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); } 导航部分代码比较简单，就不在这里大块的贴了，直接下载代码看吧。 （编辑：92站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
