要谈jsonp，首先要弄明白jsonp是什么，它是用来干嘛的。jsonp其实就是我们常用的script标签，用来解决跨域的，只不过这个标签是动态创建的，为啥要动态创建涅。
举个小栗子：
假如我们远程文件remote.js是这样的：
handle({result:‘我是远程文件派来的数据‘})我们在本地中这样引入：
<script type="text/javascript"> ????var handle= function(data){ ???????alert(data.result); ????}; </script> <script type="text/javascript" src="跨域服务器/remote.js"></script>这样就可以把远程文件的result弹出来。那么问题来了，远程js不知道他要调用的本地js函数名怎么办？所以，我们就动态创建一个script，把远程要调用的函数名用callback参数给服务端传过去，相当于告诉服务端，你要调用的本地函数名在callback参数里。像这样
<script type="text/javascript"> ????var handle= function(data){ ???????alert(data.result); ????}; ??????var script = document.createElement(‘script‘); ??????????script.src = ‘跨域服务器/remote?callback=‘ + handle +‘&n=‘ + Math.random();</script> 这样一个简易版的jsonp 就算实现了，当然，其实还是可以进行封装一下的，这样想用的时候只要调用就行了:
function jsonp(url, data = {}, callback = ‘callback‘) { ???function handle(param) { ???????var str = ‘‘; ??????//处理参数 ???????for (var key in param) { ???????????str = str + ‘&‘ + key + ‘=‘ + param[key]; ???????} ???????return str; ???} ???return new Promise(function (resolve, reject) { ???????var script = document.createElement(‘script‘); ???????window[callback] = function (json) { ???????????if (json) { ???????????????resolve(json); ???????????} ???????} ???????script.src = url + ‘?callback=‘ + callback + handle(data) + ‘&n=‘ + Date.now(); ???????document.body.appendChild(script); ???})}浅谈jsonp
原文地址：https://www.cnblogs.com/renbo/p/9130980.html