jsonp处理跨域问题

当使用ajax访问url获取数据时,可能会存在一些跨域的问题。


什么是跨域

1.域名不同,(ip地址不同)

2.域名相同,(ip地址相同),端口不同

跨域的问题:

浏览器存在限制,不让访问数据。而不是服务端的限制,服务端正常发送请求,也正常响应了,但是当数据到达浏览器,浏览器不让js去拿这些数据。此时以上ajax的方案就起不到作用。

处理跨域:

方案:JsonP

原理:利用 script标签,加载src路径,实现跨域加载js文件。该js文件中需要定义好一个方法,将该方法名传递给服务端,服务端根据该方法名,拼装一个方法调用语句,响应给浏览器。又浏览器来执行该语句调用方法。通过参数,将响应的数据取出即可。

实现:

js:

1.定义一个方法,script加载

2.取方法中参数,进行业务处理。

jq:已经封装好了

只需要在jq的ajax中,指定dataType为"jsonp",jq在发送请求前会先定义好一个方法。 发送请求时会将该方法作为参数(callback)传递给服务端。

服务端响应,调用方法,把数据取出,传递给data,data中拿到的即为服务端数据。

服务端的配合:

改造方法

//响应类型contentType可以指定produces="application/json;charset=utf-8",
	//也可以使用常量值 APPLICATION_JSON_UTF8_VALUE
	@RequestMapping(value = "/user/token/{token}",produces=MediaType.APPLICATION_JSON_UTF8_VALUE)
	@ResponseBody
	public String getUserByToken(@PathVariable String token,String callback){
		E3Result result = tokenService.getUserByToken(token);
		//响应结果之前,要先判断是否为jsonp形式,即判断callback是否有数据
		if (StringUtils.isNoneBlank(callback)) {
			//callback不为空,则是jsonp请求
			//把结果封装成一个js语句响应
			return callback  + "(" + JsonUtils.objectToJson(result) + ");";
			
		}
		return JsonUtils.objectToJson(result);
	}
//spring4.1之后可使用以下方法,不用手动拼串
	@RequestMapping(value="/user/token/{token}")
	@ResponseBody
	public Object getuserByToken(@PathVariable String token,String callbacak){
		E3Result result = tokenService.getUserByToken(token);
		if (StringUtils.isNoneBlank(callbacak)) {
			//把结果封装成一个jsonp请求
			MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
			//设置jsonp方法为callback
			mappingJacksonValue.setJsonpFunction(callbacak);
			return mappingJacksonValue;
		}
		return result;
	}
以上两种方式自选。

相关文章

AJAX是一种基于JavaScript和XML的技术,能够使网页实现异步交...
在网页开发中,我们常常需要通过Ajax从后端获取数据并在页面...
在前端开发中,经常需要循环JSON对象数组进行数据操作。使用...
AJAX(Asynchronous JavaScript and XML)是一种用于创建 We...
AJAX技术被广泛应用于现代Web开发,它可以在无需重新加载页面...
Ajax是一种通过JavaScript和HTTP请求交互的技术,可以实现无...