带你实现一个 JSONP 实例
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>jquery 动态生成script标签，并定义好方法。前提是jsonpCallback的方法名与引入的js文件方法名一致。
重新刷新页面即可看到弹出框中获取的 jsonp 中的数据。
简单描述就是——先定义一个方法，然后引入外部JS调用这个方法并携带数据。
以上就是对于 JSONP 的简洁描述，希望对你有帮助。