通过jsonp解决浏览器跨域问题

一、什么是jsonp

为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

二、例子

1、客户端写法

这里借用了前端jquery框架对jsonp的支持

var ajaxUrl = "http://192.168.8.141:9092/project/rest/team/matchResult/1/20/1/1000";

function localHandler(data) {
	console.log("fengshu")
	console.log(data);
}

var ajaxParam = {
	async: false,
	url: ajaxUrl,
	type: "GET",
	dataType: ‘jsonp‘,//非正式跨域传输协议
	jsonp: ‘localHandler‘,
	success: function (json) {
		//回调数据在localHandler处理
	}
};
$.ajax(ajaxParam);

2、服务器端写法

@RequestMapping("/matchResult/{page}/{pageSize}/{type}/{matchId}")
	public  void getMatchResult(HttpServletResponse response, @PathVariable("page") int page,
			@PathVariable("pageSize") int pageSize, @PathVariable("type") String type,@PathVariable("matchId") String matchId) {
		EntityList<MatchResult> datas = dddService.getTeamRanks(matchId,type,page,pageSize);
		ObjectMapper objectMapper = new ObjectMapper();
		String jsonResult=null;
		try {
			jsonResult = objectMapper.writeValueAsString(datas);
		} catch (JsonGenerationException e1) {
			e1.printStackTrace();
		} catch (JsonMappingException e1) {
			e1.printStackTrace();
		} catch (IOException e1) {
			e1.printStackTrace();
		}
		PrintWriter out=null;
		response.setCharacterEncoding("UTF-8");
		try {
			out = response.getWriter();

		} catch (IOException e) {
			e.printStackTrace();
		}  out.println( "localHandler("+jsonResult + ")");
                out.close();
	}

三、总结

目前在浏览器端使用json传输数据jsonp传输协议是解决跨域问题的首选方案

时间: 2024-08-03 11:01:59

通过jsonp解决浏览器跨域问题的相关文章

解决浏览器跨域限制发送ajax请求

一.什么是浏览器跨域限制?本质是什么? 所谓浏览器跨域限制,其实是为了数据安全的考虑由Netscape提出来限制浏览器跨域访问数据的策略,这是一中约定,正式叫法为浏览器同源策略,目前已经在大多数浏览器中支持. 本质上,所谓浏览器同源策略即:不允许浏览器访问跨域的Cookie,ajax请求跨域接口等.也就是说,凡是访问与自己不在相同域的数据或接口时,浏览器都是不允许的. 最常见的例子:对于前后端完全分离的Web项目,前端页面通过rest接口访问数据时,会出现如下问题: 不允许发送POST请求:在发

jQuery中利用JSONP解决AJAX跨域问题

写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http:/

说说JSON和JSONP,浅析JSONP解决AJAX跨域问题

说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决. 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域.而这就是本文将要讲述的内容. JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互

解决浏览器跨域的几种方式

1.什么是跨域问题 在页面中使用js访问其他网站的数据时,就会出现跨域问题,比如在网站中使用ajax请求其他网站的天气.快递或者其他数据接口时,以及hybrid app中请求数据,浏览器会提     示一下错误: XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域  

JSONP解决ajax跨域问题

在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested resource. 在响应头中加入一个属性:response.setHeader("Access-Control-Allow-Origin", "*"); 可以解决,但都说有安全问题... 那么就用jsonp的方式解决. 下面是转的文章: JSONP是如何工作的? 我对这

解决浏览器跨域问题

最近在做项目过程中遇到客户端访问不同域的服务时,IE10以下的版本不会发起http请求(google和火狐内置支持跨域). 这是为了对跨站点请求伪造攻击采取的安全措施.如果我们需要跨域访问,那该怎么办那? 不用怕IE还是给我们提供了一个解决方法.在IE8以后,它提供了一个XDomainRequest 对象(详细内容请看http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx),它是专门跨站数据获取的对象,它里面有两个比较重要的方法:

Java服务端用CORS方法解决浏览器跨域问题

跨域问题简单来说,就是浏览器访问a.com时,a.com中的javascript,想要访问b.com的资源. 浏览器从安全角度考虑限制了这种行为.所以访问失败了. 解决方案主要有两种: 1.JSONP 2.CORS JSONP JSONP方案是将数据放在服务端的javascript脚本中,请求这个javascript.由于浏览器不限制javascript的跨域访问,因此服务端只要把数据放在这个伪javascript中就可以了.需要服务端定义好存有JSON数据的javascript脚本. CORS

jsonp解决js跨域问题

hi,everybody.自己遇到的问题跟大家分享下,在电商网站中,经常会遇到跨域问题. google,百度了好久.真不容易啊   js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域.   然后说用jsonp的方法解决,好了,又要google,百度 jsonp了,漫长的搜索后,才知道jquery的ajax需要修改    $.ajax({          

【转】Php+ajax+jsonp解决ajax跨域问题

首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 发送端: $.ajax({ type : "post", url : "ajax.php", dataType : "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"jsonpcallb