分布式环境Ajax的跨域请求
分布式结构优点 在做该系统的过程中,系统的前台和后台是分开,但是都使用同一个数据库,这样设计架构的优点有: 1、前台系统和后台的服务相分离,降低了系统的耦合度。 2、有利于开发团队的分工协作,提高开发的效率。 3、可以灵活进行分布式的部署,也就是说当PC端和移动端都请求服务层时,服务层压力或比较大,这样可以单独给服务层添加设备,
分布式结构优点
在做该系统的过程中,系统的前台和后台是分开,但是都使用同一个数据库,这样设计架构的优点有:
1、前台系统和后台的服务相分离,降低了系统的耦合度。
2、有利于开发团队的分工协作,提高开发的效率。
3、可以灵活进行分布式的部署,也就是说当PC端和移动端都请求服务层时,服务层压力或比较大,这样可以单独给服务层添加设备,增加其可靠性。
问题
但是如果进行分布式部署后,就会出现Ajax的跨域请求问题,例如现在的需求为页面需要通过Ajax请求数据库中的商品分类信息,这时有两种调用方式实现该功能:1、浏览器调用通过Ajax调用前台工程,前台工程调用服务层,服务层再查询数据库从而获取商品分类信息返回。2、浏览器直接通过Ajax调用服务层,服务层查询数据库获取分类信息。采用第2种方法较为方便,但是这时需要处理Ajax的跨域请求问题。
跨域
跨域情况有域名不同的系统属于跨域,域名相同但是端口不同的系统属于跨域。Js出于安全考虑,只允许访问域名且端口相同的系统。解决跨域问题的方法有很多,在这里使用的方案为使用jsonp。
Jsonp
js跨域请求数据不可以,但是,可以依据js可以跨域请求js脚本的特点将需要请求的数据封装成一个js语句获取,做一个方法调用,跨域请求可以得到封装了请求数据的js语句,再将数据作为参数传递到方法中,就可以获取数据了,其中间都是通过js语句进行交互。
调用方法
下面是js里进行jsonp调用部分的代码。
var category = {
URL_Serv: "请求的服务URL?callback=category.getDataService",
},GetData: function() {
//使用jsonp来实现跨域请求
$.getJSONP(this.URL_Serv, category.getDataService);
},getDataService: function(a) {
//解析获取的数据
}
}
下面是服务层代码实现
形式一:
@RequestMapping("/itemcat/all")
@ResponseBody
public Object getItemCatList(String callback) {
//创建封装好商品类别列表的pojo对象
CatResult catResult = itemCatService.getItemCatList();
//对象序列化,转为字符串
MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
//jsonp包装
mappingJacksonValue.setJsonpFunction(callback);
return mappingJacksonValue;
}
形式二:
@RequestMapping(value="/itemcat/all",
produces=MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8")
@ResponseBody
public String getItemCatList(String callback) {
//创建封装好商品类别列表的pojo对象
CatResult catResult = itemCatService.getItemCatList();
//把pojo转换成字符串
String json = JsonUtils.objectToJson(catResult);
//拼装返回值
String result = callback + "(" + json + ");";
return result;
}
这里的JsonUtils是自定义的一个工具类,用其中的对象转json方法将对象转化为json字符串。
总结
我对Ajax的跨域请求了解还不是很多,望多多指点,解决跨域问题还有其他的相关方法,在这里推荐一篇文章,这篇文章介绍了多种方法,大家有兴趣可以去学习一下。文章链接:JS、JQuery和ExtJs的跨域处理
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)