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函数中做自己想做的事情啦！

• 点赞
• 收藏
• 分享
• 文章举报