什么是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数据,供后面使用