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：

1. <div class="line search-content"> 
2.             <div class="column col-threefifths"> 
3.                 <h3 id="results-header"></h3> 
4.                 <p id="results-summary"></p> 
5. <!--结果显示区域--> 
6.                 <div id="search-result"> 
7.                     <h3>搜索结果</h3> 
8. <!-- 结果描述，例如总共多少条，但前是哪些条 --> 
9.                     <div id="result-aggregates" class="results"></div> 
10.                     <ul id="result-list" class="results"> 
11.                     </ul> 
12. <!--翻页导航--> 
13.                     <ul id="result-navigation" class="result-navigation"> 
14.                         <li id="prev">&laquo;</li> 
15.                         <li id="next">&raquo;</li> 
16.                     </ul> 
17.                 </div> 
18. <!--错误信息显示--> 
19.                 <p id="error-list"> 
20.                 </p> 
21.             </div> 
22. <!-- 搜索入口 --> 
23.             <div class="column last-col"> 
24.                 <h3>输入搜索词:</h3> 
25.                 <p> 
26.                     <input id="txtQuery" type="text" title="Search Terms" /> 
27.                     <button id="btnSearch" type="button" title="搜索">搜索</button> 
28.                 </p> 
29.             </div> 
30.         </div> 

通过jQuery调用Bing API部分

1.定义Bing API需要传入的一些参数：

1. //申请的APP ID，这里换成你自己的。 
2.    var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186"; 
3.    //通过用户输入搜索词获得检索串 
4.    var Query = "Query=" 
5.    //指定检索来源类型，Bing提供了网页、视频、图片等所有类型，参考API 
6.    //这里指定的是网页类型 
7.    var Sources = "Sources=Web"; 
8.    //指定API版本 
9.    var Version = "Version=2.0"; 
10.    //指定所在地区，如google，每个地区搜索结果是不一样的，这里指定中国 
11.    var Market = "Market=zh-cn";  
12.    //一些选项设置，这里开启搜索结果中的搜索词高亮 
13.    var Options = "Options=EnableHighlighting"; 
14.    //每页返回条数 
15.    var WebCount = 10; 
16.    //当前为第几页，从0开始的 
17.    var WebOffset = 0; 

2.为搜索按钮绑定处理方法：

1. $(function() { 
2.     $('#btnSearch').click(function() { 
3. //这里调用最关键的Search方法，取数据 
4.         Search(); 
5.     }); 
6. }); 

3.下面来看最关键的Search部分，调用API获取结果数据：

1. $(function() { 
2. function Search() { 
3.   
4. //获取用户输入的搜索词，并替换空格为“+” 
5.         var searchTerms = $('#txtQuery').val().replace(" ", "+"); 
6.   
7. //防止传输中文时产生乱码 
8.         searchTerms = encodeURI(searchTerms);    
9.   
10. //将接口需要的所有参数封装为数组 
11.         var arr = [AppId, Query + searchTerms, Sources, Version, Market, Options, "Web.Count=" + WebCount, "Web.Offset=" + WebOffset, "JsonType=callback", "JsonCallback=?"]; 
12.   
13. //将参数数组拼装成url串，最终得到bing的URL Service的请求URL 
14.         var requestStr = "http://api.search.live.net/json.aspx?" + arr.join("&"); 
15.   
16. //通过jquery ajax调用bing json数据接口 
17.         $.ajax({ 
18.             type: "GET", 
19.             url: requestStr, 
20.  //指定数据类型为jsonp 
21.             dataType: "jsonp",   
22.   
23. //调用成功后返回数据对象，并调用处理方法 
24.             success: function(msg) { 
25.                 SearchCompleted(msg); 
26.             }, 
27.             error: function(msg) { 
28.                 alert("Something hasn't worked\n" + msg.d); 
29.             } 
30.         }); 
31.     } 
32. }); 

我们看到在使用jquery ajax时，指定数据类型为jsonp，jsonp是一种可跨域访问的协议

4.再来看获取到数据后的UI处理，主要包括显示结果和显示错误信息两部分：

1. function SearchCompleted(response) { 
2. /检查结果数据对象中的Errors对象，判断是否发生错误 
3.        var errors = response.SearchResponse.Errors; 
4.        if (errors != null) { 
5.            // 发生错误的话调用错误信息显示方法 
6.            DisplayErrors(errors); 
7.        } 
8.        else { 
9.            // 没有错误的话调用结果信息显示方法 
10.            DisplayResults(response); 
11.        } 
12.    } 

下面是显示结果方法，因为要改变UI，所以代码多一点，不过这里可以感受一下jquery中dom操作的灵活。

1.  function DisplayResults(response) { 
2. //清空结果列表 
3.         $("#result-list").html("");   
4.  //清空翻页导航 
5.         $("#result-navigation li").filter(".nav-page").remove();    
6. // 清空结果描述信息 
7.         $("#result-aggregates").children().remove();  
8.   
9. //获取结果数据对象 
10.         var results = response.SearchResponse.Web.Results;   
11.   
12. //描述信息部分，即总过多少条，当前是哪些条 
13.         $('#result-aggregates').prepend("<p>检索词： " + response.SearchResponse.Query.SearchTerms + "</p>"); 
14.         $('#result-aggregates').prepend("<p id=\"result-count\">当前显示 " + StartOffset(results) 
15.             + " 至 " + EndOffset(results) 
16.             + "&nbsp;&nbsp;总共:" + parseInt(response.SearchResponse.Web.Total) + "</p>"); 
17.   
18. //创建结果列表，把每一项要显示的内容放在一个数组中 
19.         var link = [];   
20. //因为开启了搜索词高亮选项，这里进行高亮匹配 
21.         var regexBegin = new RegExp("\uE000", "g");     
22.         var regexEnd = new RegExp("\uE001", "g");      
23.         for (var i = 0; i < results.length; ++i) { 
24. //创建每一结果项的信息 
25.             link[i] = "<li><a href=\"" + results[i].Url + "\" title=\"" + results[i].Title + "\">" 
26.                 + results[i].Title + "</a>" 
27.                 + "<p>" + results[i].Description + "<p>" 
28.                 + "<p class=\"result-url\">" + results[i].Url + "</p></li>"; 
29.   
30. //搜索词加粗显示 
31.             link[i] = link[i].replace(regexBegin, "<strong>").replace(regexEnd, "</strong>"); 
32.         } 
33. //在页面结果区域显示结果列表     
34.        $("#result-list").html(link.join(''));  
35.   
36. //处理导航区域 
37.         CreateNavigation(response.SearchResponse.Web.Total, results.length); 
38.     }