jsonp解决跨域

同源策略：浏览器的安全策略，指协议、域名、端口完全相同。同源或不同源指的是两个地址间的关系。

默认，只有同源的地址之间才能相互进行ajax请求。不同源之间的请求称为跨域请求。

 

jsonp解决跨域：https://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/

 

jsonp：json with padding的缩写，是一种借助<script>标签发送跨域请求的技术。

 

jsonp原理：通过<script>标签发送跨域请求，请求响应一段javascript代码，

服务端响应的这一段javascript代码是：一个方法名，包裹一个json对象（所以叫json with padding）。

浏览器接收到javascript代码后立即执行，相当于调用了一个函数。所以，我们需要预先定义好这个函数。

jsonp必须是get请求。

 

jsonp操作1：

<script type="text/javascript">
    // 本地定义一个函数
    function fun1(data) {
        alert(data.name);
    }
</script>
<script type="text/javascript" src="http://其他域名/js/json.js"></script>

<script type="text/javascript" src="http://其他域名/js/json.js"></script>这个标签作用：
　　当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。src指向的内容会嵌入到文档中当前标签所在的位置。
　　这个标签的作用也就相当于：
　　<script type="text/javascript">
　　　　// 这里是src="http://其他域名/js/json.js"响应的内容
　　　　fun1({"name":"张三","age":10});
　　<script>
　　浏览器接收到javascript代码后立即执行，调用方法 fun1({"name":"张三","age":10});

所以，上面代码的本质是：

<script type="text/javascript">
    // 本地定义一个函数
    function fun1(data) {
        alert(data.name);
    }
</script>
<script type="text/javascript">
    fun1({"name":"张三","age":10});
</script>

 

jsonp操作2：

<script type="text/javascript">
    function fun1(data) {
        alert(data.name + "-" + data.age);
    }
    var script = document.createElement("script");
    script.src = "http://localhost/Demo01/jsonResult?jsonp=fun1";
    document.body.appendChild(script);
</script>

通过javascript代码，动态发送跨域请求，"?jsonp=fun1"表示回调函数名为fun1，服务端响应的数据格式为：fun1(json对象);
服务端代码：

@RequestMapping("/jsonResult")
@ResponseBody
public String fun1(String jsonp) {
    if(jsonp.length() > 0) { // jsonp请求
        return jsonp + "(" + "{\"name\":\"张三\",\"age\":10}" + ")";
    } else {
        return "{\"name\":\"张三\",\"age\":10}";
    }
}