一、Jsonp簡(jiǎn)介
1.什么是Jsonp
Jsonp（JSON with Padding）是json的一種“使用模式”，可以讓網(wǎng)頁(yè)從別的域名（網(wǎng)站）獲取資料，即跨域讀取數(shù)據(jù)。
為什么從不同的域名（網(wǎng)站）訪問數(shù)據(jù)需要Jsonp呢？，這是因?yàn)?strong>同源策略的存在。
2.什么是跨域
跨域是指一個(gè)域（網(wǎng)站）下的文檔或腳本試圖去請(qǐng)求另一個(gè)域（網(wǎng)站）下的資源
image.png
3.同源策略
同源策略/SOP（Same origin policy）是一種規(guī)定，由Netscape公司在1995年引入瀏覽器，它是瀏覽器最核心也是最基本的安全功能，現(xiàn)在所有支持JavaScript的瀏覽器都會(huì)使用這個(gè)策略。如果缺少了同源策略，瀏覽器很容易收到XSS、CSFR等攻擊。所謂同源是指”協(xié)議+域名+端口“三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源。
3.1 非同源策略限制以下幾種行為：
- Cookie、LocalStorage 和 IndexDB 無法讀取
- DOM和JS對(duì)象無法獲得
- AJAX請(qǐng)求不能發(fā)送
4.常見跨域場(chǎng)景
image.png
5.解決跨域方案
- 通過jsonp跨域
- document.domain + iframe跨域
- location.hash + iframe
- window.name + iframe 跨域
- postMessage 跨域
- 跨域資源共享（CORS）
- nginx 代理跨域
- nodejs 中間件代理跨域
- WebSocket 協(xié)議跨域
6.Jsonp的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受同源策略限制，它的兼容性很好，不需要 XMLHttpRequest 或ActiveX 的支持；并且在請(qǐng)求完畢后可以通過調(diào)用 callback 的方式回傳結(jié)果。
缺點(diǎn)：
它只支持 GET 請(qǐng)求而不支持 POST 等其它類型的 HTTP 請(qǐng)求。它只支持跨域 HTTP 請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行 JavaScript 調(diào)用的問題。
二、Jsonp的使用
1.搭建跨域場(chǎng)景
1.1 需求
- 創(chuàng)建兩個(gè)web工程，名為jsonDemo1(8080)、jsonDemo2(9090)
- jsonDemo1 中提供一個(gè) index.jsp。
- 在 jsonDemo1 的 index.jsp 中通過 jQuery 的 Ajax 跨域請(qǐng)求 jsonDemo2
- jsonDemo2 中使用 springMVC 處理請(qǐng)求，返回一個(gè) json 對(duì)象
- 在 jsonDemo1 中將返回的結(jié)果插入到 index.jsp 中
1.2 創(chuàng)建項(xiàng)目
jsonDemo1
image.png
jsonDemo2
image.png
2.使用jsonp解決跨域
2.1 常見跨域異常
image.png
2.2 ajax請(qǐng)求要改變
<%@ 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對(duì)Jsonp的支持
注意：需要導(dǎo)入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 轉(zhuǎn)換
MappingJacksonValue mv = new MappingJacksonValue(list);
mv.setJsonpFunction(callback);
return mv;
}
