400-9988-316
发布时间：2021-01-28浏览量：544次
一、什么是跨域访问
举个栗子：在a网站中，我们希望使用ajax来获得b网站中的特定内容。如果a网站与b网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。
总而言之，同源策略规定，浏览器的ajax只能访问跟它的html页面同源（相同域名或ip）的资源。
二、什么是jsonp jsonp(json with padding)是json的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 html 的元素是一个例外。利用元素的这个开放策略，网页可以得到从其他来源动态产生的 json 资料，而这种使用模式就是所谓的 jsonp。用 jsonp 抓到的资料并不是 json，而是任意的javascript，用 javascript 直译器执行而不是用 json 解析器解析。更具体的原理需要更多篇幅的讲解，小伙伴可以自行去百度。
三、jsonp的使用前端的使用示例
jquery ajax对jsonp进行了很好的封装，我们使用起来很方便。前端示例：
$.ajax({
type:"get",
url:"http://www.deardull.com:9090/getmyseat", //访问的链接
datatype:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});
需要注意的地方是：
datatype，该参数必须要设置成jsonp
jsonp，该参数的值需要与服务器端约定，详细情况下面介绍。（约定俗成的默认值为callback）
后端的配合示例jquery ajax jsonp原理
后端要配合使用jsonp，那么首先得了解jquery ajax jsonp的一个特点：
jquery在发送一个ajax jsonp请求时，会在访问链接的后面自动加上一个验证参数，这个参数是jquery随机生成的.
添加这个参数的目的是唯一标识这次请求。当服务器端接收到该请求时，需要将该参数的值与实际要返回的json值进行构造（如何构造下面讲解），并且返回，而前端会验证这个参数，如果是它之前发出的参数，那么就会接收并解析数据，如果不是这个参数，那么就拒绝接受。
需要特别注意的是这个验证参数的名字（我在这个坑上浪费了2小时），这个名字来源于前端的jsonp参数的值。如果把前端jsonp参数的值改为“aaa”，那么相应的参数就应该是 aaa=jquery31106628680598769732_1512186387045&_=1512186387046
后端接收与处理
知道了jquery ajax jsonp的原理，也知道了需要接受的参数，我们就可以来编写服务器端程序了。
为了配合json，服务器端需要做的事情可以概括为两步：
第一步、接收验证参数
根据与前端ajax约定的jsonp参数名来接收验证参数，示例如下（使用springmvc，其他语言及框架原理类似）
@responsebody
@requestmapping("/getjsonp")
public string getmyseatsuccess(@requestparam("callback") string callback){
第二步、构造参数并返回
将接收的的验证参数callback与实际要返回的json数据按“callback(json)”的方式构造：
@responsebody
@requestmapping("/getmyseat")
public string getmyseatsuccess(@requestparam("callback") string callback){
gson gson=new gson(); //google的一个json工具库
map
map.put("seat","1_2_06_12");
return callback "(" gson.tojson(map) ")"; //构造返回值
}
四、总结
最终，前后端的相应代码应该是这样的：
前端
$.ajax({
type:"get",
url:"http://www.deardull.com:9090/getmyseat", //访问的链接
datatype:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});
后端
@responsebody
@requestmapping("/getmyseat")
public string getmyseatsuccess(@requestparam("callback") string callback){
gson gson=new gson();
map
map.put("seat","1_2_06_12");
logger.info(callback);
return callback "(" gson.tojson(map) ")";
}