0x01 前言
今天復(fù)習(xí)了一下有關(guān)jsonp相關(guān)的攻防知識(shí)，突然發(fā)現(xiàn)自己對(duì)于jsonp的理解只是在書本上的那種，對(duì)于其具體的實(shí)現(xiàn)還是一知半解的，因此寫篇文章記錄一下jsonp的實(shí)現(xiàn)過程，會(huì)附上具體代碼滴～
0x02 JSONP的概念
那么什么是JSONP呢，在理解JSONP之前，我們需要知道的是什么是JSON，有過一些web基礎(chǔ)的小伙伴一定都聽說過這個(gè)單詞了，JSON是如今用來傳輸文本的一種很流行的格式，其格式類似這樣：
{
"id" : "1",
"name" : "pino"
}
而JSONP的話，用一張圖片就比較形象的解釋了
就是這樣嘍，多出來了一個(gè)單詞和一對(duì)括號(hào)。那么JSONP用來做什么呢？通常來說，是用來跨域的，我們都知道，瀏覽器是存在一個(gè)叫做同源策略的東東，不同源的兩個(gè)站點(diǎn)理論上是無法進(jìn)行網(wǎng)絡(luò)通信的，但是有的時(shí)候我們還是需要進(jìn)行不同源的站點(diǎn)通信，那么就用到了JSONP來進(jìn)行跨域通信啦。
0x03 JSONP跨域通信的實(shí)現(xiàn)
JSONP的跨域?qū)崿F(xiàn)有很多種方式，這里我給大家展示的是兩種類型的方式，javascript和jquery，而jquery又有三種方法。
服務(wù)端
盡管有很多種方式，但是這里服務(wù)端的代碼是一成不變的，這里我在自己的公網(wǎng)服務(wù)器上創(chuàng)建了一個(gè)jsonp.php的文件
<?php
$arr = array('id'=>1, 'name'=>'pino','location'=>'china');
$result = json_encode($arr);
$callback = $_GET['callback'];
echo $callback."($result)";
?>
并且修改自己電腦中的hosts文件，把公網(wǎng)ip對(duì)應(yīng)一個(gè)域名，這里我起名為pino.my.com
3.1 前端——Javascript代碼
<!DOCTYPE html>
<html>
<head>
<title>jsonp</title>
<meta content="text/html; charset=urf-8" http-equiv="Content-Type">
<script type="text/javascript">
function jsonpCallback(result){
for(var i in result){
document.write(i+":"+result[i]+"<br />");
}
}
</script>
<script src="http://pino.my.com/jsonp.php?callback=jsonpCallback"></script>
</head>
</html>
需要注意的是，function一定要定義在請(qǐng)求之前，否則會(huì)出現(xiàn)未定義的錯(cuò)誤
這里我們?cè)L問http://localhost:8080/jsonp.html，這個(gè)網(wǎng)頁(yè)中有一個(gè)跨域請(qǐng)求，請(qǐng)求pino.my.com的資源，通過callback的方式完成請(qǐng)求
成功獲取服務(wù)端資源！
前端——JQuery之getJSON方法
getJSON方法的用法如下：
實(shí)現(xiàn)代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>jsonp with jquery</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://pino.my.com/jsonp.php",
dataType:"jsonp",
data:"",
jsonp:"callback",
success:function(result){
for(var i in result){
document.write(i+":"+result[i]+"<br />");
}
},
timeout:3000
});
});
</script>
</body>
</html>
訪問后同樣成功獲取資源
前端——JQuery之a(chǎn)jax方法
代碼
<!DOCTYPE html>
<html>
<head>
<title>jsonp with jquery ajax</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://pino.my.com/jsonp.php",
dataType:"jsonp",
data:"",
jsonp:"callback",
success:function(result){
for(var i in result){
document.write(i+":"+result[i]+"<br />");
}
},
timeout:3000
});
});
</script>
</body>
</html>
這里的url是直接http://pino.my.com/jsonp.php，沒有?callback，這是應(yīng)為ajax方法的回調(diào)是直接放在success選項(xiàng)中了，因此需要在success選項(xiàng)中定義一個(gè)回調(diào)函數(shù)function
訪問一下：
前端——JQuery之get方法
<!DOCTYPE html>
<html>
<head>
<title>jsonp with jquery get</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.get("http://pino.my.com/jsonp.php?callback=?",
function(result){
for(var i in result){
document.write(i+":"+result[i]+"<br />");
}
},
'jsonp'
);
});
</script>
</body>
</html>
get方法需要寫的東西跟getJSNON很像，但是一定別忘記最后還有一個(gè)jsonp的選項(xiàng)，否則會(huì)出錯(cuò)的。
