浅谈jsonp

Posted 2020-11-10 鲁小肃

要谈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);
    })
}