JSONP是一种投机取巧创造的一种非官方跨域数据交互协议。
为什么要用JSONP,因为要跨域请求,一般直接请求普通文件存在跨域无权限访问的问题,至于为什么JSONP能跨域请求的话,想知道的可以百度,很多,这里就不过多赘述
前端
当前执行的项目端口号为8080,用此项目请求端口号为8082的项目
如果不是用jsonp的话
在做ajax请求的时候,请求不到并且浏览器会报错,错误如下:
XMLHttpRequest cannot load http://xxxxxxNo 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxxxxx' is therefore not allowed access.
window.onload = function(){
var token ="hitomi";
$.ajax({
type: "get",
async: false,
data:{
token:token//传递到后台的参数
},
//跨域的地址(这里是http://localhost:8082是这个项目地址和端口号,user/jsonplogin是请求的路径,即后台的路径)
url: "http://localhost:8082/user/jsonplogin",
dataType: "jsonp",//返回jsonp格式即:flightHandler({xxxxx});
jsonp: "jsonpCallback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback),作为request参数传到后台
//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据,一个jsonp的名称
jsonpCallback:"flightHandler",
success: function(json){
alert('返回成功');
},
error: function(){
alert('fail');
}
});
}
function flightHandler(data) {
//处理data
alert(data);
}
后端
/**
* jsonp登录
* @return
*/
@ResponseBody
@RequestMapping(value = "/jsonplogin")
public String test(
HttpServletRequest request,
HttpServletResponse response,String token
) throws Exception{
//String result = "{"+"result"+":"+"flightHandler"+"}";//flightHandler这个参数要返回的页面有的函数
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "private,no-cache,no-store,max-age=0");
response.setDateHeader("Expires", 0);
String str=request.getParameter("jsonpCallback");//对应ajax中jsonp传进来的值,当名称
if (str==null||str.equals("")) {
return str;
} else {
return str + "(" + str + ")";
}
}
前端传到后端的参数
以下引用此文章:ajax跨域问题处理
Jsonp原理:
首先在客户端注册一个callback (如:'jsonpCallback'), 然后把callback的名字(如:jsonp123)传给服务器。注意:服务端得到callback的数值后,要用jsonp123(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsonpCallback'的值 jsonp123
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)
可以说jsonp的方式原理上和是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.
注意,jquey是不支持post方式跨域的.