跨域JSONP使用

JSONP是为解决跨域而生，说起跨域先理解一下同源，只有当域名、端口、协议一样的情况下才是同源，其他的都是不同源，当不同源发出的ajax请求就是跨域，这个时候会被浏览器拦截。
JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

后端服务

    @RequestMapping(value = "jsonp",method = RequestMethod.GET)
    @ResponseBody
    public Object jsonp(@RequestParam(value = "callback",required = false) String callback){
        Map<String,Object> map= new HashMap<>();
        map.put("a",123);
        map.put("b","234");
        if(StringUtils.isEmpty(callback)){
            return map;
        }
        return callback+"("+ JSON.toJSONString(map)+")";
    }

• jQuery封装JSONP

$.getJSON(
"http://localhost:9999/aop/jsonp?callback=?", 
function(data){
    console.log(data);
});

或者：
$.ajax({
        type: "GET",
        url: "http://localhost:9999/aop/jsonp",
        dataType: "jsonp",
        headers: {
                "Accept" : "application/json; charset=utf-8",
                "Content-Type": "application/javascript; charset=utf-8",
                "Access-Control-Allow-Origin" : "*"
            },
        success: function (result) {
            console.log(result);
        },
        error: function (xhr, errorText) {debugger;
            console.log('Error ' + xhr.responseText);
        }
});

• 动态创建script标签

function handleResponse(data){
  console.log(data);
}
var script = document.createElement("script");
script.src = "http://localhost:9999/aop/jsonp?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);