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, 進入該文件夾內打開命令行工具
npm install koa koa-static新建 index.js 文件
// index.js
const Koa = require('koa')
const app = new Koa()
app.use(require('koa-static')(__dirname + '/public'))
app.listen(3000)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 的簡潔描述，希望對你有幫助。