什么是跨域
出于安全方面的考虑，页面中的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）获取的数据如下：
|
1
|
{"id": 123, "name" : 张三, "age": 17}
|
那么使用JSONP方式请求（http://www.test.com/user?id=123?callback=data）的数据可以是这样：
|
1
|
data({"id": 123, "name" : 张三, "age": 17});
|
当然，如果服务端考虑得更加充分，返回的数据可能如下：
|
1
|
try{data({"id": 123, "name" : 张三, "age": 17});}catch(e){}
|
这时候我们只要定义一个data()函数，并动态地创建一个script标签，使其的src属性为
|
1
|
http://www.a.com/user?id=123?callback=data
|
便可以使用data函数来调用返回的数据了。
JSONP跨域实例
通常情况下，服务端代码只要判断请求是否带有callback参数，动态的添加callback函数，就可以实现一个支持JSONP的接口。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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());
}
|
本文转自邴越博客园博客，原文链接：http://www.cnblogs.com/binyue/p/3423326.html，如需转载请自行联系原作者
