JSONP 被用于跨域擷取資料。在講解它之前，先講講它與 JSON 之間的差別
什麼是JSON？
JSON 是一種基于文本的資料交換方式，或者叫做資料描述格式。
其優點是：
1、基于純文字，跨平台傳遞極其簡單；
2、Javascript 原生支援，背景語言幾乎全部支援；
3、輕量級資料格式，占用字元數量極少，特别适合網際網路傳遞；
4、可讀性較強，雖然比不上 XML 那麼一目了然，但在合理的依次縮進之後還是很容易識别的；
5、容易編寫和解析，當然前提是你要知道資料結構；
JSON 的缺點當然也有，跨域無法擷取資料，而 JSONP 的出現正好彌補了這一缺陷
什麼是JSONP？
JSONP 是一種依靠開發人員的聰明才智創造出的一種非官方跨域資料互動協定，其本質就是 js 檔案。
JSONP的用戶端具體實作
- Web頁面上調用js檔案時不受是否跨域的影響（不僅如此，凡是擁有”src”這個屬性的标簽都擁有跨域的能力，比如
<script>、<img>、<iframe>
- 跨域js檔案中的代碼（當然指符合web腳本安全政策的），web頁面也是可以無條件執行的。
接下來将以具體執行個體解釋 JSONP 的原理，首先確定你的電腦上安裝了nodejs
1.建立本地 web 伺服器
建立檔案夾 jsonp, 進入該檔案夾内打開指令行工具
建立 index.js 檔案
// index.js
const Koa = require('koa')
const app = new Koa()
app.use(require('koa-static')(__dirname + '/public'))
app.listen()
2.建立 public 檔案夾後進入檔案夾，建立 index.html, somejsonp.js檔案
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var localHandler = function(data){
alert('我是本地函數，可以被跨域的remote.js檔案調用，遠端js帶來的資料是：' + data.result);
};
</script>
<script type="text/javascript" src="./somejsonp.js"></script>
</body>
</html>
// somejsonp.js
localHandler({"result":"我是遠端js帶來的資料"});
3.然後回到 jsonp 檔案夾，輸入指令
node index.js
後，用浏覽器打開
http://localhost:3000
即可看到浏覽器視窗彈出js檔案中的result，也就是我們擷取到了js的資料。這便是jsonp的基本原理。
動态擷取 JSONP 的資料，就是在頁面中動态插入一段script标簽，scr中包含路徑及參數，這樣背景可根據參數動态生成JS檔案，涉及背景實作，這裡不做過多闡述。
JSONP 在 JQuery 中的具體實作
jquery 中對于 jsonp 的封裝也是基于以上原理，下面是基于 jquery 的代碼
修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url: 'http://localhost:3000/somejsonp.js',
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "localHandler",
success: function (data) {
alert(data.result)
}
})
</script>
</body>
</html>
重新重新整理頁面即可看到彈出框中擷取的 jsonp 中的資料。
以上就是對于 JSONP 的簡潔描述，希望對你有幫助。
![同源政策與jsonp跨域[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)