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