使用jQuery及Bing API实现简易搜索引擎.doc

使用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站点向我们展示了详细的开发文档：1. 访问bing开发者站点：/developers，在这里也可以找到Bing API在MSDN上的入口 2. 使用微软的账户登录（没有只能先注册一个啦） 3. 填写表格，获取“APP ID”（用来调用API时用的，微软要确定你是微软的开发者） HTML部分页面元素很简单，主要包括检索入口、结果显示区域、结果描述、错误信息显示及翻页导航五部分，下面看HTML： 搜索结果 « » 输入搜索词: 搜索 通过jQuery调用Bing API部分1. 定义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;2. 为搜索按钮绑定处理方法： $(function() $(#btnSearch).click(function() /这里调用最关键的Search方法，取数据 Search(); ););3. 下面来看最关键的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 = /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 hasnt workedn + msg.d); ); );我们看到在使用jquery ajax时，指定数据类型为jsonp，jsonp是一种可跨域访问的协议，我对其也不是非常清楚，可以在这里了解一下。另外 CSS9.NET 也计划在后面的文章中讲解json的相关知识，敬请关注。4. 再来看获取到数据后的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(检索词： + response.SearchResponse.Query.SearchTerms + ); $(#result-aggregates).prepend(当前显示 + StartOffset(results) + 至 + EndOffset(results) +   总共: + parseInt(response.SearchResponse.Web.Total) + );/创建结果列表，把每一项要显示的内容放在一个数组中 var link = ; /因为开启了搜索词高亮选项，这里进行高亮匹配 var regexBegin = new RegExp(uE000, g); var regexEnd = new RegExp(uE001, g); for (var i = 0; i results.length; +i) /创建每一结果项的信息 linki = + resultsi.Title + + + resultsi.Description + + + resultsi.Url + ;/搜索词加粗显示 linki = linki.replace(regexBegin, ).replace(regexEnd, ); /在页面结果区域显示结果列表 $(#result-list).html(link.join(); /处理导航区域 CreateNavigation(response.SearchResponse.Web.Total, results.length); 导航部分代码比较简单，就不在这里大块的贴了，直接下载代码看吧。下载：示例源码另外，在MSDN的bing api部分为开发者提供了非常多的代码实例，感兴趣的可以去看。有朋友留言提出检索中文的时候出现乱码。我又做了测试，如这位朋友所说，在IE中检索时有乱码情况，但是在Firefox中正常（我此前只在Firefox下做测试，故未发现）。出现这种情况，是由于ajax传输中文检