分布式环境Ajax的跨域请求

Posted 2022-12-08 任长江

分布式结构优点

        在做该系统的过程中，系统的前台和后台是分开，但是都使用同一个数据库，这样设计架构的优点有：

       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的跨域处理