浅谈jsonp

要谈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

最新文章

热门文章