如何使用jQuery来调用Bing

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

$(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);
        }
    }

|||

导航部分代码比较简单，就不在这里大块的贴了，直接下载代码看吧。