jsonp跨域请求

1.什么是跨域

　　跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

　　所谓同源是指，域名，协议，端口均相同。

2.什么是jsonp

　　Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

3.jsonp的原理

　　浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。

4.服务端代码

方式一：自己拼装返回结果

    @ResponseBody
    public String getItemCatList(String callback) {
         //此处获取对象信息
        CatResult catResult = itemCatService.getItemCatList();
        //把pojo转换成json字符串
        String json = JsonUtils.objectToJson(catResult);
        //拼装返回值//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了

        String result = callback + "(" + json + ");";
        return result;
    }

方式二：使用MappingJacksonValue对象拼装返回结果 

@ResponseBody
    public Object getItemCatList(String callback) {
        CatResult catResult = itemCatService.getItemCatList();
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
        mappingJacksonValue.setJsonpFunction(callback);
        return mappingJacksonValue;
    }

5.客户端代码

　　5.1基于JavaScript标签实现调用

　　添加一个<script>标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；

　　showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

　　至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便

    <script>
        //回调函数
        function showData (result) {
            var data = JSON.stringify(result); //json对象转成字符串
            alert(data);
        }

        $(document).ready(function () {//向头部输入一个脚本，该脚本发起一个跨域请求
            $("head").append("<script src='http://localhost:9090/student?callback=showData'></script>");
        });
    </script>

　　5.2基于ajax的jsonp方式实现调用

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

了解更多参考：https://www.cnblogs.com/chiangchou/p/jsonp.html

　　

@ResponseBody

     public Object getItemCatList(String callback) {

          CatResult catResult = itemCatService.getItemCatList();

          MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);

          mappingJacksonValue.setJsonpFunction(callback);

          returnmappingJacksonValue;

     }