封装JSONP-技术博客集

封装JSONP
编程技术 / houtizong 发布于 2年前 101

我们经常遇到JS 跨域的问题，跨域的解决方案有很多，JSONP是非常常用的跨域解决方案，这里封装了一下JSONP：

function getJSONP(url, callback) {    if (!url) {        return;    }    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函数的属性    if (url.indexOf('?') === -1) {        url += '?jsonp=' + cbname;    } else {        url += '&jsonp=' + cbname;    }    var script = document.createElement('script');    //定义被脚本执行的回调函数    getJSONP[name] = function (e) {        try {            //alert(e.name);
　　　　　　　　callback && callback(e);        } catch (e) {            //        }        finally {            //最后删除该函数与script元素            delete getJSOP[name];            script.parentNode.removeChild(script);        }    }    script.src = url;    document.getElementsByTagName('head')[0].appendChild(script);}getJSONP('http://localhost:8888/',function(response){
　　alert(response.name);
});

上一篇：HTML5 Web Storage

下一篇：动态加载Javascript增强版本

请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！

我们经常遇到JS 跨域的问题，跨域的解决方案有很多，JSONP是非常常用的跨域解决方案，这里封装了一下JSONP： <div class="cnblogs_code"> <pre>function getJSONP(url, callback) { if (!url) { return; } 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函数的属性 if (url.indexOf('?') === -1) { url += '?jsonp=' + cbname; } else { url += '&amp;jsonp=' + cbname; } var script = document.createElement('script'); //定义被脚本执行的回调函数 getJSONP[name] = function (e) { try { //alert(e.name); 　　　　　　　　callback &amp;&amp; callback(e); } catch (e) { // } finally { //最后删除该函数与script元素 delete getJSOP[name]; script.parentNode.removeChild(script); } } script.src = url; document.getElementsByTagName('head')[0].appendChild(script);}getJSONP('http://localhost:8888/',function(response){ 　　alert(response.name); });</pre> </div>

留言需要登陆哦

技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];

文章归档

文章标签

友情链接

首页
关于我们

Auther ·HouTiZong: 侯体宗的博客