jsonp跨域请求

什么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

什么是jsonp

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

JSONP跨域的原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

下面我们来查看示例代码来实现

		$.ajax({
            type:"GET",
            url:"http://localhost:8083/getMajors", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

需要注意的地方是：

• dataType：该参数必须要设置成jsonp

• jsonp：该参数的值需要与服务器端约定，详细情况下面介绍。（约定俗成的默认值为callback）

下面看我的个人项目中的jsonp跨域请求院系列表，并遍历返回的json对象，添加option到select控件中

js代码

		$("#add, #edit").click(function () {
            $("#academy_select").empty();
            //发送ajax请求获取院系，专业列表
            $.ajax({
                type: "get",
                async: true,
                url: "http://localhost:8083/getStuAcademies",
                dataType: "jsonp",
                jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                success: function(json){
                	//遍历服务端返回的json数据
                    $.each( json, function(index, content)
                    {
                        //为Select追加一个Option(下拉项)
                        var str = "<option value=" + content.id + ">" + content.name + "</option>";
                        $("#academy_select").append(str);
                    });       
                },
                error: function(){
                    alert('院系列表请求失败');
                }
            });
        });

服务端代码

@Controller
public class AcademyController {

    @Autowired
    private StuAcademyService stuAcademyService;

    /**
     * 返回一个List<StuAcademy> stuAcademies转换成的json字符串
     * @param callback 回调函数
     * @return 返回一个List<StuAcademy> stuAcademies转换成的json字符串
     */
    @RequestMapping(value = "/getStuAcademies", method = RequestMethod.GET, produces= "text/plain;charset=UTF-8")
    @ResponseBody
    public String getStuAcademies(@RequestParam("callback") String callback){
    	//查询所有的院系
        List<StuAcademy> stuAcademies = stuAcademyService.selectAll();
        //通过JsonUtils工具把List集合转换为Json字符串
        String json = JsonUtils.objectToJson(stuAcademies);
        //如果回调函数参数不等于null
        if(callback != null){
        	//返回json字符串拼接callback，最后结果: callback(json)
            return callback+"("+ json +")";
        }
        return json;
    }
}

我们来看看请求过程


这时，前端接受到的就是这样一个函数

jQuery21005459636364985787_1573138315067([{"id":1,"name":"计算机学院","created":null,"updated":null},{"id":2,"name":"文学院","created":null,"updated":null}])

正常来说，我们需要有这样一个function来供它调用，但是在ajax中，success回调函数会自动生成该函数，并且会将参数自动传入第二张图function中作为参数 ，相当于

json==[{"id":1,"name":"计算机学院","created":null,"updated":null},{"id":2,"name":"文学院","created":null,"updated":null}]

				success: function(json){
                    $.each( json, function(index, content)
                    {
                        //为Select追加一个Option(下拉项)
                        var str = "<option value=" + content.id + ">" + content.name + "</option>";
                        $("#academy_select").append(str);
                    });
                },

最后我们就可以在success函数中做自己想做的事情啦！