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站点向我们展示了详细的开发文档：




访问bing开发者站点：<A onclick=”javascript：pageTracker._trackPageview(‘/outbound/article/bing.com’);” href=”http://bing.com/developers”>http://bing.com/developers，在这里也可以找到<A onclick=”javascript：pageTracker._trackPageview(‘/outbound/article/msdn.microsoft.com’);” href=”http://msdn.microsoft.com/en-us/library/dd251056.aspx”>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”>&laquo;</li>


                        <li id=”next”>&raquo;</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>