跨域请求——前台

什么是JSONP

首先提一下JSON这个概念，JSON是一种轻量级的数据传输格式，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。

那么JSONP是什么呢？ 
首先抛出浏览器同源策略这个概念，为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面，详细的概念大家可以自行百度。这里大家只要知道，在ajax中，不允许请求非同源的URL就可以了，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。

JSONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？

JSONP原理

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

JSONP具体实现

前台代码：

function testJSONP(){
                var data = {
                        spId : '1234567',
                        pageSize: 5,
                        pageIndex: 1,
                };
                $.ajax({
                    url: "/helpRecord/keyPetition/list",
                    type: "GET",
                    data: data,
                    jsonp: "callback",   //指定参数名称
                    dataType: "jsonp", //指定服务器返回的数据类型
                    jsonpCallback: "showData",  //指定回调函数名称
                    success: function (data) {
                        debugger;
                        alert("success");
                    }
                });
            }

后台代码：

@RequestMapping(value = "/keyPetition/list", method = RequestMethod.GET)
    public void keyPetitionlist(String spId, int pageIndex, int pageSize, HttpServletRequest request, HttpServletResponse response){
        Result result = new Result();
        result = this.helpRecordServicesImpl.listHelpRecordBySpIdForKeyPetition(spId, pageIndex, pageSize);

        //前端传过来的回调函数名称
        String callback = request.getParameter("callback");
        //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
        String resultp = callback + "(" + result.toString() + ")";
        this.print(resultp.toString(), response);
    }

请求成功后，jquery自动会把callback参数解析成对应的json数据，供后面使用