2.封装Jsonp实现跨域

最新推荐文章于 2021-11-18 20:26:39 发布

weixin_45963440

最新推荐文章于 2021-11-18 20:26:39 发布

阅读量77

点赞数

分类专栏： Json和Ajax

本文链接：https://blog.csdn.net/weixin_45963440/article/details/113768026

版权

Json和Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.实现原理流程

在这里插入图片描述

2.源码

<body>
    <script>
        function getJSONP(url, callback) {
            if (!url) {
                return;
            }
            //定义1个数组以便产生随机函数名(回调函数函数名)
            var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
            var r1 = Math.floor(Math.random() * 10);
            var r2 = Math.floor(Math.random() * 10);
            var r3 = Math.floor(Math.random() * 10);
            var name = 'getJSONP' + a[r1] + a[r2] + a[r3];
            var cbname = 'getJSONP.' + name;//作为jsonp函数的属性
            // console.log(cbname);//打印jsonp函数的随机属性名

            if (url.indexOf('?') === -1) {
                url += '?jsonp=' + cbname;
            } else {
                url += '&jsonp=' + cbname;
            }
            console.log(url);
            var script = document.createElement('script');
            //定义被脚本执行的回调函数
            getJSONP[name] = function(data){//使用" [name] "不使用" .name ",因为.name要求name是1个固定字符串,
                                         //[name]方括号中的name可以变化
                try{
                    callback && callback(data);//此写法等效于if(callback) callback(e);
                }catch(e){
                    //
                }finally{
                    //最后删除该函数与script元素
                    delete getJSONP[name];
                    script.parentNode.removeChild(script);
                }
            }
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script);
        }

        //跨域调用
        getJSONP('http://class.imooc.com/api/jsonp', function (response) {
            console.log(response);
        });
    </script>
</body>

weixin_45963440

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.封装Jsonp实现跨域

1.实现原理流程2.源码<body> <script> function getJSONP(url, callback) { if (!url) { return; } //定义1个数组以便产生随机函数名(回调函数函数名) var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
复制链接

扫一扫