SpringMVC+Jquery+Ajax跨域请求获取数据

2019独角兽企业重金招聘Python工程师标准>>>

   网上查询了下，发现说jQuery对跨域请求有两种解决方案，分别是jQuery的jquery.ajax jsonp格式和jquery.getScript方式,这里主要记录下jsonp跨域的处理。

   json格式我们比较经常使用,但是jsonp就不那么常用了，所以首先这里需要对jsonp要有一个了解。  

jsonp解释
在解释jsonp之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载额文档的属性。有点绕,说的简单点就是浏览器限制脚本只能和同协议、同域名、同端口的脚本进行交互。

    jsonp就是为了解决这一问题的,jsonp是英文JSON  with Padding的缩写,是一个非官方的协议。他允许服务端生成script tags返回值客户端,通过JavaScript callback的形式来实现站点访问。jsonp是一种script tag的注入,将server返回的response添加到页面是实现特定功能。
    简而言之,jsonp本身不是复杂的东西,就是通过scirpt标签对javascript文档的动态解析绕过了浏览器的同源策略。   

下面就直接上代码了~~~

###前端js文件内容

/**
 *   脚本
 */

var page = {
		
	/**
	 * 页面数据
	 */	
	data:{
		
	},
	
	/**
	 * 事件
	 */
	event:{
		
		/**
		 * 初始化事件
		 */
		initEvent:{
			
			init:function(){
				var url = page.data.moralViewUrl+page.data.userId;
				var userInfo = {};
				$.ajax({
					type : "POST",
					url : url,
					async: false,  
					dataType : "jsonp",
					jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数  
					data : userInfo,
					success : function(responseData) {
						if (responseData.code == 0) {//登录成功
							
							
						} else { 
							alert(responseData.msg);
						}

					},
					error : function(responseData) {
						alert(responseData.msg);
					}
				});
			}
		},
		
		/**
		 * 绑定事件
		 */
		bindEvents:{
			
		
			
			
		},
		
		handleEvents:{
			
			
		}
		
	}
		
};


$(document).ready(function() {
	
	page.event.initEvent.init();
	
});

###服务端代码

	@RequestMapping("/Info/{id}")
	public void getInfo(@PathVariable Integer id, HttpServletRequest request,
			HttpServletResponse response) {
		Map<String, Object> map = Maps.newConcurrentMap();
		map.put("msg", "成功");
		processOtherDomainAccess(request, response, map);
	}


    /**
	 * 处理跨域请求处理方法
	 * @param request
	 * @param response
	 * @param data
	 */
	protected void processOtherDomainAccess(HttpServletRequest request, HttpServletResponse response,Map<String, Object> data) {
		response.setContentType("text/plain");
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		ObjectMapper mapper = new ObjectMapper();
		PrintWriter out = null;
		String result = "";
		try {
			out = response.getWriter();
			data.put("code", 0);
			String jsonpCallback = request.getParameter("jsonpCallback");// 客户端请求参数
			result = jsonpCallback + "(" + mapper.writeValueAsString(data) + ")";
		} catch (Exception e) {
			data.put("code", 1);
			data.putIfAbsent("msg", "获取失败");
			try {
				result = "callback" + "(" + mapper.writeValueAsString(data) + ")";
			} catch (JsonProcessingException e1) {
				e1.printStackTrace();
			}
		}

		out.println(result);// 返回jsonp格式数据
		out.flush();
		out.close();
	}

###参考博客地址
http://hanqunfeng.iteye.com/blog/1866712
http://blog.csdn.net/lcore/article/details/41022567

转载于:https://my.oschina.net/u/2426199/blog/761708