jsonp封装

171 阅读1分钟

跨域的四种方式:

    1,通过请求后端获取数据
    2,jsonp
    3, Cors
    4, nginx
    

封装jsonp

            function isObject(obj){
        if(Object.prototype.toString.call(obj)=== '[object Object]'){
            return true;
        }
        return false
    }

    function jsonp(options){
        window[options.JsonpCallback] = options.success;
        var data = '';
        //判断数据类型
        if(typeof(options.data) === 'string') {
            data = options.data;
        }
        if(isObject(options.data)){
            for(key in options.data){
                data+= key+'='+options.data[key]+'&';
            }
            data = options.data.substring(0,data.length -1 );
        }
        //获取到了数据之后 创建script
        var  oScript = document.createElement('script');
        oScript.src = options.url + '?'+options.data+'&'+options.jsonp+options.JsonpCallback;
        document.body.appendChild(oScript);
        oScript.onload = function(){
            document.body.removeChild(oScript);
        }
    }

数据的请求格式 # jsonp({

    url: 'http://suggestion.baidu.com/su';
    data: 'wd=' + search.value;
    // 根据接口来输入
    jsonp: 'cb', 
    // 可以自定义
    jsonpCallback: 'mycb' ,
    success: function (json) {
        list.innerHTML = '';
        json.s.forEach(function (item) {
            list.innerHTML += '<li>' + item + '</li>';
        });
    }
});