JsonP

時間 2019-11-12

標籤 jsonp 欄目 JSON 简体版

原文原文鏈接

1、 JsonP 簡介

1 什麼是 JsonP

Jsonp(JSON with Padding) 是 json 的一種"使用模式",可讓網頁從別的域名(網站)
那獲取資料,即跨域讀取數據。
爲何咱們從不一樣的域(網站)訪問數據須要一個特殊的技術(JSONP )呢?這是由於同
源策略。javascript

2 什麼是跨域?

跨域是指一個域(網站)下的文檔或腳本試圖去請求另外一個域(網站)下的資源。html

3 什麼是同源策略?

同源策略/SOP(Same origin policy)是一種約定,由 Netscape 公司 1995 年引入瀏覽器,
它是瀏覽器最核心也最基本的安全功能,如今全部支持 JavaScript 的瀏覽器都會使用這個策
略。若是缺乏了同源策略,瀏覽器很容易受到 XSS、CSFR 等攻擊。所謂同源是指"協議+域
名+端口"三者相同,即使兩個不一樣的域名指向同一個 ip 地址,也非同源。java

3.1 非同源策略限制如下幾種行爲:

1.) Cookie、LocalStorage 和 IndexDB 沒法讀取2.) DOM 和 Js 對象沒法得到
3.) AJAX 請求不能發送
4 常見跨域場景
node

5 跨域解決方案

1) 經過 jsonp 跨域
2) document.domain + iframe 跨域
3) location.hash + iframe
4) window.name + iframe 跨域
5) postMessage 跨域
6) 跨域資源共享(CORS)
7) nginx 代理跨域
8) nodejs 中間件代理跨域
9) WebSocket 協議跨域

6 JsonP 優缺點

JSONP 的優勢是:它不像 XMLHttpRequest 對象實現的 Ajax 請求那樣受到同源策略的
限制;它的兼容性更好,在更加古老的瀏覽器中都能夠運行,不須要 XMLHttpRequest 或
ActiveX 的支持;而且在請求完畢後能夠經過調用 callback 的方式回傳結果。
JSONP 的缺點則是:它只支持 GET 請求而不支持 POST 等其它類型的 HTTP 請求;它只支持跨域 HTTP 請求這種狀況,不能解決不一樣域的兩個頁面之間如何進行 JavaScript 調用
的問題。jquery

2、 JsonP 的使用

1 搭建跨域場景
1.1 需求:
1)建立兩個 web 工程,名稱爲 jsonDemo1(8080)、jsonDemo2(9090)
2)jsonDemo1 中提供一個 index.jsp。
3)在 jsonDemo1 的 index.jsp 中經過 Jquery 的 Ajax 跨域請求 jsonDemo2
4)jsonDemo2 中使用 springMVC 處理請求,返回一個 json 對象
5)在 jsonDemo1 中將返回的結果插入到 index.jsp 中
1.2 建立項目
1.2.1 jsonDemo11.2.2 jsonDemo2nginx

2 使用 JsonP 解決跨域
2.1 Ajax 跨域請求時會出現異常web

2.2 在 ajax 中請求方式有所改變ajax

<%@ page language="java" contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#but").click(function(){
$.ajax({
type:"get",
url:"http://localhost:9090/user/findUser",
dataType:"jsonp",
jsonp:"callback",
success:function(data){
alert(data);
var str = "";
for(i=0;i<data.length;i++){
str+= data[i].userid+""+data[i].username+" "+data[i].userage+" ";
}
$("#show").html(str);
}
});
});
});
</script>
</head>
<body>
<span id="show"></span>
<input type="button" value="OK" id="but"/>
</body>
</html>

View Code

2.3 請求的 Controller 須要改變spring

@Controller
@RequestMapping("/user")
public class UserController {
@RequestMapping("/findUser")
@ResponseBodypublic String findUser(String callback){
Users user = new Users(1, "admin", 20);
Users user1 = new Users(2, "zhangsan", 22);
Users user2 = new Users(3, "lisi", 24);
List<Users> list = new ArrayList<>();
list.add(user);
list.add(user1);
list.add(user2);
String json = JsonUtils.objectToJson(list);
//callback({id:1,name:zhangsan...})
return callback+"("+json+")";
}
}

View Code

3 SpringMVC 對 JsonP 的支持json

@Controller
@RequestMapping("/user")
public class UserController {
@RequestMapping("/findUser")
@ResponseBodypublic Object findUser(String callback){
Users user = new Users(1, "admin", 20);
Users user1 = new Users(2, "zhangsan", 22);
Users user2 = new Users(3, "lisi", 24);
List<Users> list = new ArrayList<>();
list.add(user);
list.add(user1);
list.add(user2);
//json 轉換
MappingJacksonValue mv = new
MappingJacksonValue(list);
mv.setJsonpFunction(callback);
return mv;
}
}

View Code

注意:須要依賴 Jackson 的 jar 包

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。