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

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

   json格式咱们比较常用,可是jsonp就不那么经常使用了,因此首先这里须要对jsonp要有一个了解。

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

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

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

###前端js文件内容java

/**
 *   脚本
 */

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();
	
});

###服务端代码jquery

@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/41022567ajax

相关文章
相关标签/搜索