我们都知道浏览器有一个同源政策的限制，所以只要是在非同源的情况下，都会产生跨域问题。那么什么是跨域问题呢？就是协议，域名，端口号这三样有一个不同就会产生跨域问题，就不满足同源政策。
但是我们会发现，script标签的src和img的src，还有link的href都可以访问网络的在线链接，都没有被同源政策所限制。所以jsonp就是利用了这个漏洞，创建了一个script标签。
举个例子：
<body>
<button id="btn">点击发送网络请求</button>
<div id="container"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script>
$("#btn").click(function () {
// 2. 不知道ajax，如果要和后端交互，无外乎发送一个网络请求
// 前端里面有哪些可以发生网络请求（img link script iframe）
/**
*
* @type {HTMLElement}
*/
var sc = document.createElement('script');
var url = 'http://localhost:3000/users';
sc.src = url;// 只是在内存里面，并没有挂载到DOM结构里面
document.head.appendChild( sc );
});
</script>
所以就是我们向页面添加了一个script标签，并加上了所要请求的URL；
我们点击摁扭却发现控制台的network里是这样
并且动态创建了一个script标签，并且它的特性就是看见src就主动发送网络请求。
但是我们需要一个容器接收相应内容呀。 确实发送网络请求 2. 服务器确实给了响应； 问题：没办法获取到服务器的响应信息。如果有那个容器可以接受响应最好。（浏览器可以告诉服务器我们这里有个容器，你把数据放在我们的容器，然后我就可以使用了）
// 2. 客户端如何告诉服务器相关的信息（get传参）
那我们在url地址通过get告诉服务器我们提供了一个容器叫box。
我们对服务器说：你可不可以把相应内容放在里面叫box的container里面给我？
var url = 'http://localhost:3000/users?container=box';
服务器收到消息：好的我这就创建一个container，把req往里面放好再给你。
router.get('/', function (req, res, next) {
var container=req.query;
console.log(container)
});
这个时候控制台，后台确实吧container给发回去了。
服务器端也知道你的需求box，
那再把东西放到box好吧，接下来就要用服务器要响应的内容填充到盒子里面
var box=req.query.container;
var fn=box+'("i am from server")'//box("i am from server");
console.log(fn);
可以看到响应已经发送回来了，但是只是一个字符串，但是如果放入js语言来说，box("i am from server")是一个叫box的函数在调用并传入了"i am from server"这样的参数。
控制台此时就会报错了，说box没定义
所以客户端就要定义一个box函数啦，就可以放上去了。
/**
* 1. 实现定义好一个 box
*/
function box(data){
console.log(data);
$("#container").html( data );
}
然后规范一点呢，就成了jsonp。
var url = 'http://localhost:3000/users?callback=fn'; // 一般容器的名称叫做 callback
// var url = 'http://localhost:3000/users?cb=fn';
相应的后台写法
router.get('/', function (req, res, next) {
// var container=req.query;
// console.log(container);
// var box=req.query.container;
// var fn=box+'("i am from server")'//box("i am from server");
// console.log(fn);
var callback = req.query.callback;
// 一般都是查询数据库获取
var userData = [
{
id: 1,
name: 'andy',
age: 12,
},
{
id: 2,
name: 'mark',
age: 22,
},
{
id: 3,
name: 'lily',
age: 12,
},
];
// 目前的拼接： json with padding 拿json格式的数据去填充 callback
var fn = callback + '( '+ JSON.stringify( userData ) +' )'; // fn( [{}, {}, {}] )
res.send(fn); // 返回的 fn( [{}, {}, {}] )
});
//相应的前台也要定义好一个函数接收
function fn(data){
console.log(data);
}
