分布式环境Ajax的跨域请求

原创 2016年08月31日 13:58:18

分布式结构优点

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

使用Spring Session和Redis解决分布式Session跨域共享问题

前言对于分布式使用Nginx+Tomcat实现负载均衡,最常用的均衡算法有IP_Hash、轮训、根据权重、随机等。不管对于哪一种负载均衡算法,由于Nginx对不同的请求分发到某一个Tomcat,Tom...
  • u010870518
  • u010870518
  • 2017年02月26日 16:01
  • 22670

MVC | 微软自带的Ajax请求

Home控制器 using System; using System.Collections.Generic; using System.Linq; using System.Web; using S...
  • Fanbin168
  • Fanbin168
  • 2014年10月26日 17:26
  • 1506

使用PHP模拟ajax请求的源代码

我已经试过了,非常好用。/** * 构造ajax请求,不支持https */ function ajax_http_request($url, $data = array(), $type = "...
  • zhulike2011
  • zhulike2011
  • 2015年07月17日 17:39
  • 2728

集群 分布式WEB开发如何阻止重复提交

重复提示 集群 springmvc web 分布式
  • qq_19568599
  • qq_19568599
  • 2016年09月21日 20:01
  • 1118

分布式高并发服务器做请求分发,session共享(nginx+tomcat+redis)

分布式高并发服务器做请求分发,session共享(nginx+tomcat+redis)
  • king866
  • king866
  • 2016年05月18日 16:33
  • 3673

AJAX的异步请求小例子

AJAX的异步请求小例子
  • starjuly
  • starjuly
  • 2016年09月09日 18:31
  • 2257

Ajax网络请求基本用法

网络请求Dome 员工查询 请输入员工编号:
  • Arnly
  • Arnly
  • 2017年04月27日 14:44
  • 349

使用jQuery发送Ajax请求

传统网页与服务器通信往往需要通过提交整个表单来实现,这样用户不得不每次在提交表单时重刷整个页面,带来很不好的用户体验,在这个背景下Ajax应运而生。   AJAX 即Asynchronous Jav...
  • John_Venn
  • John_Venn
  • 2015年12月22日 23:35
  • 3368

angularjs学习笔记之一(ajax请求)

实现ajax请求 【HTML 代码】 angularjs实现 ajax ...
  • wujiangwei567
  • wujiangwei567
  • 2015年03月30日 10:34
  • 1572

合并ajax请求

最小化 Ajax 请求 Ajax 请求彻底改变了传统 web 应用程序的样子,它让 JavaScript 开发人员能创建高度动态化、交互性强、响应迅速的应用程序,就像在桌面应用程序中体验到的那样...
  • shjavadown
  • shjavadown
  • 2016年04月13日 22:52
  • 412
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:分布式环境Ajax的跨域请求
举报原因:
原因补充:

(最多只允许输入30个字)