jsonp——简单跨域解决方法

作为入门级菜鸟，之前一直以为jsonp只是json多个p的别名，惭愧惭愧。
jsonp只是json的一种使用模式，是json with Padding的简称，用来实现跨域访问后台数据。
为了安全浏览器都采用了同源策略，所谓同源是指，域名，协议，端口相同。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
大体分为以下情况：

在https://www.jianshu.com调用https://www.jianshu.com/json/——不会跨域
在https://www.jianshu.com 调用http://www.caoliu.com/json/——域名不同，跨域
在https://www.jianshu.com调用https://joke.jianshu.com/search_joke.com.html ——不同二级域名，跨域
在https://www.jianshu.com:8888调用https://www.jianshu.com:8080——端口不同，跨域
在https://www.jianshu.com调用http://www.jianshu.com ——请求协议不同，跨域的
在http://40.128.2.3调用http://40.128.2.3——IP不同，跨域
在http://localhost调用http://127.0.0.1 ——属于域名不同，跨域

直接用JavaScript写的话，需要先定义好请求返回数据的回调处理函数，然后在js中加入script标签，像这样

<script>
//js中声明 jsonp回调方法，一定要写在jsonp请求前面
    function callback(txt){
        alert(txt);
    }
</script>
<script src ="/demo/testJsonp.shtml" type="text/javascript" ></script>

后端代码中，返回调用

/**
* jsonp 测试
* @return
*/
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(){
return "callback('test jsonp');";
}

返回调用了js中的回调函数，页面alert “test jsonp”.
或者在请求中添加回调参数，

<script>
//js中，jsonp回调函数
    function testjson(txt){
        alert(txt);
    }
</script>
<script src ="/demo/testJsonp.shtml?callback=testjson" type="text/javascript" ></script>

后端代码中调用参数中提供的函数进行回调：

/**
* jsonp 测试
* @return
*/
@RequestMapping(value="testJsonp",method=RequestMethod.GET)
@ResponseBody
public String testJsonp(String callback){
return callback +"('test jsonp');";
}

这样我们可以利用动作触发向页面dom中添加<script>标签的方式完成跨站请求，当然，可以使用jQuery的代码实例：

<script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    alert(data);
});
</script>

上面代码还是需要分开写，还是比较麻烦，jquery还提供了jsonp方式跨域请求：
服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:'jsonp'，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。
这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

<script>
       $(document).ready(function () {
         $("#btn").click(function () {
              $.ajax({
                    url: "http://localhost:9090/student",
                    type: "GET",
                    dataType: "jsonp", //指定服务器返回的数据类型
                    success: function (data) {
                     var result = JSON.stringify(data); //json对象转成字符串
                     $("#text").val(result);
                    }
                });
             });
         });
</script>

jQuery实现jsonp调用细节可以参考https://www.cnblogs.com/chiangchou/p/jsonp.html，用不到的同学可以不深究。
最后：jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。需要使用其他方式进行跨站请求的小伙伴可以换一种方式了。另外，跨域请求需要服务端配合，设置callback，才能完成跨域请求。

本文参考文章：
https://www.sojson.com/json/json_jsonp.html
http://www.runoob.com/json/json-jsonp.html
https://www.cnblogs.com/chiangchou/p/jsonp.html