声明:这篇东西是转载于:IIduce 文章地址:http://css9.net/jquery-ajax-bing-api-search/
微软在今年六月正式发布了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(" ", "+"); //防止传输中文时产生乱码 searchTerms = encodeURI(searchTerms); //将接口需要的所有参数封装为数组 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); }
导航部分代码比较简单,就不在这里大块的贴了,直接下载代码看吧。
下载:示例源码
另外,在MSDN的bing api部分为开发者提供了非常多的代码实例,感兴趣的可以去看。
—————————————————————————–
有朋友留言提出检索中文的时候出现乱码。我又做了测试,如这位朋友所说,在IE中检索时有乱码情况,但是在Firefox中正常(我此前只在Firefox下做测试,故未发现)。
出现这种情况,是由于ajax传输中文检索词时产生乱码,所以传递前需编码,改正如下:
在function.js中第二十行var searchTerms = $(’#txtQuery’).val().replace(” “, “+”); 后添加下面一句:
searchTerms = encodeURI(searchTerms); //防止传输中文时产生乱码
在线示例及下载源码已更正,感谢sundy提出问题。