资讯专栏INFORMATION COLUMN

自己写了个jsonp

qqlcbb / 3262人阅读

摘要:最近公司要跨域请求一个服务,服务未启动的时候还要报错。自己做了一个以符合业务需求贴上源码希望大家能多多提意见给赋函数的时候没有采取一个请求一个函数是因为后台服务参数没有函数名称

  最近公司要跨域请求一个服务,服务未启动的时候还要报错。自己做了一个以符合业务需求
  
  
 贴上源码:
        
        希望大家能多多提意见
        
        /**

v 1.0

author xingzheng

date 2018-12-19

*/
var JSONP = {

    now : function() {
        return (new Date()).getTime();
    },
    rand : function() {
        return Math.random().toString().substr(2);
    },
    waitPostArr:[],
    currentNodeName: "",
    
    removeElem : function(elem) {
        try{
            var parent = elem.parentNode;
            if (parent && parent.nodeType !== 11) {
                parent.removeChild(elem);
            }
        }catch(e){
            console.log(e);
        }
        
    },
    parseData : function(data) {
        var ret = "";
        if (typeof data === "string") {
            ret = data;
        } else if (typeof data === "object") {
            for ( var key in data) {
                ret += "&" + key + "=" + encodeURIComponent(data[key]);
            }
        }
        ret += "&_time=" + this.now();
        ret = ret.substr(1);
        return ret;
    },
    
    getJSONS : function(arr){
        this.waitPostArr = arr;
        this.getJSON(arr[0].url, arr[0].data, arr[0].func);
        this.waitPostArr.splice(0, 1);
    },
    getJSON : function(url, data, func) {
        var name;
        if(url.url){                    
            url = url + (url.url.indexOf("?") === -1 ? "?" : "&")
                + this.parseData(data);
        }else{
            url = url + (url.indexOf("?") === -1 ? "?" : "&")
                + this.parseData(data);
        }
        var match = /callback=(w+)/.exec(url);
        if (match && match[1]) {
            name = match[1];
        } else {
            name = "jsonp_" + this.now() + "_" + this.rand();
            url = url.replace("callback=?", "callback=" + name);
            url = url.replace("callback=%3F", "callback=" + name);
        }
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.id = "id_" + name;            
        script.onerror = function() {
            try{
                func({
                    result : "connectFailed"
                });
            }catch(e){
                JSONP.JSONP_next();
            }
            
        };
        var head = document.getElementsByTagName("head");
        if (head && head[0]) {
            head[0].appendChild(script);
        }
        this.currentNodeName = name;
    },
    JSONP_next : function(){
        if(this.waitPostArr && this.waitPostArr.length > 0){
            this.getJSON(this.waitPostArr[0].url, this.waitPostArr[0].data, this.waitPostArr[0].func);
            this.waitPostArr.splice(0, 1);
        }
    }
};
window["success_jsonpCallback"] = function(json) {
    var elem = document.getElementById("id_" + JSONP.currentNodeName);
    JSONP.removeElem(elem);
    try{
        func(json);
        JSONP.JSONP_next();
    }catch(e){
        JSONP.JSONP_next()
    }
};

给windows赋函数的时候没有采取一个请求一个函数是因为后台服务参数没有函数名称(WTF)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100171.html

相关文章

  • jsonp跨域获取数据实现百度搜索

    摘要:同源策略做了很严格的限制,但是在实际的场景中,又确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域。使用跨域由于同源策略,一般来说位于的网页无法与不是的服务器沟通,而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    Tikitoo 评论0 收藏0
  • jsonp跨域获取数据实现百度搜索

    摘要:同源策略做了很严格的限制,但是在实际的场景中,又确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域。使用跨域由于同源策略,一般来说位于的网页无法与不是的服务器沟通,而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    gggggggbong 评论0 收藏0
  • jsonp跨域获取数据实现百度搜索

    摘要:同源策略做了很严格的限制,但是在实际的场景中,又确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域。使用跨域由于同源策略,一般来说位于的网页无法与不是的服务器沟通,而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    lemanli 评论0 收藏0
  • jsonpGet, 跨域如此简单

    摘要:源码我们经常在项目中遇到跨域问题,比如有时候在做个人项目的时候,我们需要请求第三方的一些数据,比如请求豆瓣公开的数据,或则音乐开放的数据等等。但是毫无疑问,在我们的应用中直接请求这些将出现跨域问题。比如,向豆瓣公开发送请求。 jsonGet源码 我们经常在项目中遇到跨域问题,比如有时候在做个人项目的时候,我们需要请求第三方的一些数据,比如请求豆瓣公开api的数据,或则qq音乐开放api...

    BoYang 评论0 收藏0
  • 拒信收割机の前端面经(CVTE,唯品会,百度)

    摘要:另外回答的时候要淡定,一些问题就算不懂也不能慌,要和面试官谈笑风生,然后尽量扯回到自己懂的东西上面大公司比如百度给我的感觉就是很重视基础思维和潜力。 —— 虽然我的offer少,但是我的拒信多啊 这几天终于闲下来,做一点微小的工作,整理了一些之前几家公司的前端面试题和个人经验,想做前端的师弟妹可以参考,也欢迎各同行大神来指教~ (以下问题不分先后,时间久远难免有些遗漏;很多问题面试官都...

    yzd 评论0 收藏0

发表评论

0条评论

qqlcbb

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<