jsonp跨域学习总结

一、背景：
Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如标签script、img、iframe）

二、原理
JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

三、实现
方法一：
后端：

    @RequestMapping("crossDomain")
    public void crossDomain(HttpServletRequest request, HttpServletResponse response) throws IOException {
        Map<String,String> resultMap = new HashMap<String,String>();
        String callback = request.getParameter("callback");
        resultMap.put("success", "true");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        writer.print("var callback=(" + JsonUtil.object2Json(resultMap)+")");
    }

输出格式：

前端：

<script src='http://***/crossDomain'></script>

src后的内容就是第三方的接口地址。

<script>
            console.log(callback);
</script>

输出：

“callback”只是相当于一个变量名称，前端接收后直接可以读到Object中的内容。

方法二：
后端：

    public void crossDomain(HttpServletRequest request, HttpServletResponse response) throws IOException {
        Map<String,String> resultMap = new HashMap<String,String>();
        String callback = request.getParameter("callback");
        resultMap.put("success", "true");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        writer.print(callback + "(" + JsonUtil.object2Json(resultMap)+")");
    }

前端：

$.ajax({
    url: 'http://***/crossDomain',
    type: 'get',
    data: {},
    dataType: "jsonp",
    jsonp:"callback",
    success : function (data) {
        alert("success");
    },
    error : function (data) {
        alert("error");console.log(data);
    },
});

原理背景参考：
http://www.qdfuns.com/notes/16738/1b6ad6125747d28592a53a960b44c6f4.html