Jsonp跨域访问原理和实例

时间：2021-09-17 16:58:28

>>什么是跨域

出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，当前域名的js只能读取同域下的窗口属性，即同源策略。
而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

一个网站的网址组成包括协议名，子域名，主域名，端口号。
比如http://www.cnblogs.com/8000/，其中http是协议名，www是子域名，cnblogs是主域名，端口号是8000，
当在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。

解决跨域问题有以下几种方式：
使用JSONP
服务端代理
服务端设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名

>>JSONP跨域的原理

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

尽管浏览器不允许页面脚本跨域读取数据，但是允许html引用跨域的资源，比如脚本程序，css，图片等等，因为script，iframe的src是不存在跨域的。 
利用script标签的开放策略，加上服务端的配合，我们可以实现跨域请求数据。

当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

例如，假如需要从服务器（http://www.test.com/user?id=123）获取的数据如下：

{"id": 123, "name" : 张三, "age": 17}

那么使用JSONP方式请求（http://www.test.com/user?id=123?callback=data）的数据可以是这样：

data({"id": 123, "name" : 张三, "age": 17});

当然，如果服务端考虑得更加充分，返回的数据可能如下：

try{data({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个data()函数，并动态地创建一个script标签，使其的src属性为

http://www.a.com/user?id=123?callback=data

便可以使用data函数来调用返回的数据了。

>>JSONP跨域实例

通常情况下，服务端代码只要判断请求是否带有callback参数，动态的添加callback函数，就可以实现一个支持JSONP的接口。

 boolean isJsonp=StringUtils.isEmpty(callback)?false : true;

		if (StringUtil.isEmpty(channelId)) {
			if(isJsonp)
				ResponseUtils.renderJson(response,callback +"("+"{\"channelId\":-1,\"data\":\"查询错误,channelId不能为空\"}"+")");
			else
				ResponseUtils.renderJson(response,"{\"channelId\":-1,\"data\":\"查询错误,channelId不能为空\"}");
			return;
		}

		Map<Object, Object> params=new HashMap<Object, Object>();
		params.put("channelId",channelId);
		try {
			List<Content> contentList=frontService.getPageListNews(channelId,pageNo,pageSize,1);
			JSONObject json=SFJsonUtil.toJSON(contentList,params);
			if(isJsonp)
				ResponseUtils.renderJson(response,callback +"("+json.toString()+")");
			else
				ResponseUtils.renderJson(response,json.toString());
		} catch (Exception e) {
			ResponseUtils.renderJson(response,"{\"channelId\":-1,\"data\":\"查询错误\"}");
			log.debug(e.toString());
		}

　　

相关文章