JSONP 的实现原理 Better

为什么要使用JSONP

由于浏览器的安全限制（同源策略），不允许AJAX访问跨域（协议、域名、端口有不同）的数据接口。

JSONP的实现原理

因为script标签不存在跨域限制。可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址。
这种数据获取方式，称为“JSONP”(JSON with Padding)

JSONP的具体实现过程

1. 先在客户端定义一个回调函数，预定义对数据的操作；
2. 把这个回调函数的名称，通过URL传参的形式，提交到服务端的数据接口；
3. 服务端组织好数据，再拿客户端传递过来的函数名，拼接出调用这个函数的字符串，发送给客户端；
4. 客户端拿到返回的字符串，当作脚本去执行，这样就能拿到JSONP的数据了；
   前端：

<script>
	function showInfo(data) {
		console.log(data)
	}
</script>
<script src="http://10.244.37.88:5000/getScript?callback=showInfo"></script>

后端（伪代码）：

// 得到函数名 showInfo以后，执行下面操作
var scriptStr = `showInfo（ ${JSON.stringify(data)} )`
return scriptStr