Jsonp方式实现跨域请求

几乎每一个前端童鞋在简历上多少都会提到ajax,json,jsonp这样的关键词，特别是有些同学并不知道jsonp到底是个什么鬼，写在简历上会不会为自己加分呢？

今天小寒同学就给大家聊聊jsonp吧，提到json和jsonp，大家都知道json是一种数据格式，在前后台交互使用比较广泛，jsonp是一种数据交换方式，适用于解决跨域问题。

首先我们明确定义，跨域，什么叫跨域，简单的说就是请求本站（本域名）之外的资源都属于跨域请求。实际上个人觉得跨域用的并不多，并没有那么多需要跨域请求的时候。当然我们更关注的是如何处理跨域问题，目前从网上可以看到很多的文章，大多都是通过script标签实现，实际上有src的标签都是可以跨越的，比如img，其次跨域需要服务端支持，也就是服务端允许客户端跨域访问。

接下来我们看一个实例：

本站有个功能是提供百度统计数据获取，目前百度统计可以对网站访问情况做一个很好的记录和分析，但却没有提供一个简单的数据输出方式，因此本站做了此接口；

接口实现的方式很简单，用户提供相关的百度统计账户信息及站点信息，本站通过百度接口查询并返回，其中支持jsonp方式调用，返回内容有两种HTML输出，jsonp返回，本文只针对jsonp返回做说明，首先我们看一下服务端代码：

/**
     * 获取统计包信息，含昨日，今日，历史总共;此方法输出该用户所有站点统计信息
     * 返回json数据，服务端已设置允许跨域，如失败的话请采用jsonp方式请求，默认回调方法为callback
     * @return json
     * @author shy
     * @date 2016-11-16 下午03:20:33
     */
    @RequestMapping("/getCountPack/jsonp")
    public String getCountPack(String email,Integer siteId,String callback,HttpServletResponse response){
        //服务端允许跨域
        response.setHeader("Access-Control-Allow-Origin", "*");
        Gson gson = new Gson();
        if(StringUtils.isNotEmpty(email) && null != siteId){
            UserInfo user = userService.getByEmail(email);
            if(null != user){
                    WebsiteUser site = new WebsiteUser();
                    site.setUser(user);
                    site.setSiteId(siteId);
                    site = websiteUserService.getWebsiteUserBySiteInfo(site);
                    if(null != site){
                        CountPack pack = getSiteCountPack(site);
                    if(StringUtils.isNotEmpty(callback)){
                        writeResponseAsync(new StringBuffer(callback + "(" +gson.toJson(pack) + ")"),response);
                    }else{
                        writeResponseAsync(new StringBuffer("callback("+gson.toJson(pack)+")"),response);
                    }
                }
            }
        }
        return "";
    }

以一个站点为例，请求地址为

http://www.axiaol.com/getCountPack/jsonp?email=38463041@qq.com&siteId=10791561&callback=jsonpcallback

请求脚本如下

参数说明：

{

    email:String本站注册邮箱,

    siteId:Integer 在本站添加的站点siteId,

    callback：回调方法，默认为"callback"

}

返回内容：

jsonpcallback({"today":{"pv":138,"uv":12,"ip":10,"nv":8},"yesterday":{"pv":392,"uv":24,"ip":28,"nv":15},"history":{"pv":3468,"uv":246,"ip":143,"nv":246}})

返回说明：如果将（）中内容看作一个json对象，其实返回的就是一个javascript语句，调用jsoncallback方法，参数是json对象；当然调用之前首先要定义jsonpcallback方法了。

客户端代码：

//方法定义必须在调用之前//方法定义必须在调用之前  	

补充说明，jsonp请求可以通过script标签，也可以通过ajax jsonp方式请求，但个人推荐script，更简单整洁

参考资料：

Jsonp方式实现跨域请求