<meta charset="utf-8">
<meta charset="utf-8">
1.什么是Jsonp
Jsonp（JSON with Padding）是json的一种“使用模式”，可以让网页从别的域名（网站）获取资料，即跨域读取数据。
为什么从不同的域名（网站）访问数据需要Jsonp呢？，这是因为同源策略的存在。
2.什么是跨域
跨域是指一个域（网站）下的文档或脚本试图去请求另一个域（网站）下的资源
image
3.同源策略
同源策略/SOP（Same origin policy）是一种规定，由Netscape公司在1995年引入浏览器，它是浏览器最核心也是最基本的安全功能，现在所有支持JavaScript的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易收到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口“三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
3.1 非同源策略限制以下几种行为：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM和JS对象无法获得
- AJAX请求不能发送
4.常见跨域场景
5.解决跨域方案
- 通过jsonp跨域
- document.domain + iframe跨域
- location.hash + iframe
- window.name + iframe 跨域
- postMessage 跨域
- 跨域资源共享（CORS）
- nginx 代理跨域
- nodejs 中间件代理跨域
- WebSocket 协议跨域
6.Jsonp的优缺点
优点：
它不像XMLHttpRequest对象实现的Ajax请求那样受同源策略限制，它的兼容性很好，不需要 XMLHttpRequest 或ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。
缺点：
它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求。它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题。
二、Jsonp的使用
1.搭建跨域场景
1.1 需求
- 创建两个web工程，名为jsonDemo1(8080)、jsonDemo2(9090)
- jsonDemo1 中提供一个 index.jsp。
- 在 jsonDemo1 的 index.jsp 中通过 jQuery 的 Ajax 跨域请求 jsonDemo2
- jsonDemo2 中使用 springMVC 处理请求，返回一个 json 对象
- 在 jsonDemo1 中将返回的结果插入到 index.jsp 中
1.2 创建项目
jsonDemo1
jsonDemo2
2.使用jsonp解决跨域
2.1 常见跨域异常
2.2 ajax请求要改变
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$.ajax({
type:'get',
url:'http://localhost:9090/user/findUser',
dataType:'jsonp',
jsonp:'callback',
success:function (data) {
var str = "";
for (var i = 0; i < data.length; i++) {
str += data[i].userId +" "+ data[i].userName +" "+data[i].userAge + " ";
}
console.log(str);
$('#show').html(str);
}
});
})
})
</script>
</head>
<body>
<span id="show">
<input type="button" value="ok" id="btn">
</span>
</body>
</html>
2.3 Controller也要改变
@Controller
@RequestMapping("/user")
public class UserController {
@RequestMapping("/findUser")
@ResponseBody
public String findUser(String callback){
User user1 = new User(1,"admin",20);
User user2 = new User(2,"tom",22);
User user3 = new User(3,"alice",21);
List<User> list = new ArrayList<>();
list.add(user1);
list.add(user2);
list.add(user3);
String json = JsonUtils.objectToJson(list);
//callback({id:1,name:admin.age:20})
return callback + "("+json+")";
}
}
3.SpringMVC对Jsonp的支持
注意：需要导入jackson的jar包
@RequestMapping("/findUser")
@ResponseBody
public Object findUser(String callback){
User user1 = new User(1, "admin", 20);
User user2 = new User(2, "tom", 22);
User user3 = new User(3, "alice", 21);
List<User> list = new ArrayList<>();
list.add(user1);
list.add(user2);
list.add(user3);
//json 转换
MappingJacksonValue mv = new MappingJacksonValue(list);
mv.setJsonpFunction(callback);
return mv;
}
作者：青年心路
链接：//www.greatytc.com/p/5f5af76f54af
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
1.什么是Jsonp
Jsonp（JSON with Padding）是json的一种“使用模式”，可以让网页从别的域名（网站）获取资料，即跨域读取数据。
为什么从不同的域名（网站）访问数据需要Jsonp呢？，这是因为同源策略的存在。
2.什么是跨域
跨域是指一个域（网站）下的文档或脚本试图去请求另一个域（网站）下的资源
image
3.同源策略
同源策略/SOP（Same origin policy）是一种规定，由Netscape公司在1995年引入浏览器，它是浏览器最核心也是最基本的安全功能，现在所有支持JavaScript的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易收到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口“三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
3.1 非同源策略限制以下几种行为：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM和JS对象无法获得
- AJAX请求不能发送
4.常见跨域场景
5.解决跨域方案
- 通过jsonp跨域
- document.domain + iframe跨域
- location.hash + iframe
- window.name + iframe 跨域
- postMessage 跨域
- 跨域资源共享（CORS）
- nginx 代理跨域
- nodejs 中间件代理跨域
- WebSocket 协议跨域
6.Jsonp的优缺点
优点：
它不像XMLHttpRequest对象实现的Ajax请求那样受同源策略限制，它的兼容性很好，不需要 XMLHttpRequest 或ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。
缺点：
它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求。它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题。
二、Jsonp的使用
1.搭建跨域场景
1.1 需求
- 创建两个web工程，名为jsonDemo1(8080)、jsonDemo2(9090)
- jsonDemo1 中提供一个 index.jsp。
- 在 jsonDemo1 的 index.jsp 中通过 jQuery 的 Ajax 跨域请求 jsonDemo2
- jsonDemo2 中使用 springMVC 处理请求，返回一个 json 对象
- 在 jsonDemo1 中将返回的结果插入到 index.jsp 中
1.2 创建项目
jsonDemo1
jsonDemo2
2.使用jsonp解决跨域
2.1 常见跨域异常
2.2 ajax请求要改变
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$.ajax({
type:'get',
url:'http://localhost:9090/user/findUser',
dataType:'jsonp',
jsonp:'callback',
success:function (data) {
var str = "";
for (var i = 0; i < data.length; i++) {
str += data[i].userId +" "+ data[i].userName +" "+data[i].userAge + " ";
}
console.log(str);
$('#show').html(str);
}
});
})
})
</script>
</head>
<body>
<span id="show">
<input type="button" value="ok" id="btn">
</span>
</body>
</html>
2.3 Controller也要改变
@Controller
@RequestMapping("/user")
public class UserController {
@RequestMapping("/findUser")
@ResponseBody
public String findUser(String callback){
User user1 = new User(1,"admin",20);
User user2 = new User(2,"tom",22);
User user3 = new User(3,"alice",21);
List<User> list = new ArrayList<>();
list.add(user1);
list.add(user2);
list.add(user3);
String json = JsonUtils.objectToJson(list);
//callback({id:1,name:admin.age:20})
return callback + "("+json+")";
}
}
3.SpringMVC对Jsonp的支持
注意：需要导入jackson的jar包
@RequestMapping("/findUser")
@ResponseBody
public Object findUser(String callback){
User user1 = new User(1, "admin", 20);
User user2 = new User(2, "tom", 22);
User user3 = new User(3, "alice", 21);
List<User> list = new ArrayList<>();
list.add(user1);
list.add(user2);
list.add(user3);
//json 转换
MappingJacksonValue mv = new MappingJacksonValue(list);
mv.setJsonpFunction(callback);
return mv;
}
