Jsonp实现

   //5、jsonp封装
    function jsonpPakeage(obj) {
        //写入url地址中的函数名称,动态创建
        var callbackName = "fn"+Math.random().toString().split("\.")[1];
        
        //创建一个script标签
        var scriptObj = document.createElement("script");
        
        obj.parames = obj.parames || '';
        if (typeof obj.parames == 'object') {
            var arr = new Array();
            for (var key in obj.parames) {
                arr.push(key + '=' + obj.parames[key])
            }
            obj.parames = arr.join('&');
        }
        //设置标签的请求路径
        //像这样:http://localhost:3000/api?callback=fn153498520409635392&id=1
        scriptObj.src = obj.url + '?' + 'callback=' + callbackName + '&' + obj.parames;
        //将创建好的带请求的script标签添加到html的body中
        document.getElementsByTagName('head')[0].appendChild(scriptObj);

        //这里必须这样写window[callbackName];
        //如果写window.callbackName会报错没有定义
        //var one = true;
        window[callbackName] = function (res) {
            //if(one){
                obj.success(res);
                //删除的时候可以这样写
                //由于请求一次会创建一个script标签和一个函数,所以每次获取到结果后就删除
                delete window.callbackName;
                document.getElementsByTagName('head')[0].removeChild(scriptObj);
                // one = false
            //}
        }
    }
    //调用
    jsonpPakeage({
        url:"http://localhost:8080/js/index.js",
        parames:"",
        success:function(res){
            console.log(res)
        }
    })

 

posted @ 2020-04-20 16:37  dnoyeb  阅读(224)  评论(0编辑  收藏  举报