跨域请求封装优化

• 跨域请求方法封装js

function myFun(obj){
    var defaults = {
        type:"get",
        url:"#",
        data:{},
        success:function(data){},
        jsonp:callback,
        jsonpCallback:"hhhh"
    };
    for(var key in obj){
        defaults[key] = obj[key];
    }
    var params = "";
    for(var attr in defaults.data){
        params += attr + "=" + defaults.data[attr] + "&";
    }
    if(params){
        params = params.substring(0,params.length-1);
        defaults.url += "?" + params;
    }
    defaults.url += "&" + defaults.jsonp + defaults.jsonpCallback;
    var script = document.createElement("script");
    script.src = defaults.url;

    window[defaults.jsonpCallback] = function(data){
        defaults.success(data);
    }
    var head = document.querySelector("head");
    head.appendChild(script);
}

• 跨域请求封装测试js

myFun({
    url:"https://suggest.taobao.com/sug",
    data:{q:keywordValue},
    success:function(data){
        console.log(data);
    },
    jsonp:"callback",
    jsonpCallback:"hhhh"
})

• 此次优化在于请求中返回数据的方法名及返回调用名的自定义，若在项目设计中需求增加请求中的参数，可根据类似的方法在定义函数的对象defaults中增加key:value的参数，同时在函数调用中增加具体的参数。
• jquery跨域请求

//使用jquery跨域获取请求
//dataType:"jsonp"
$.ajax({
    url:"https://suggest.taobao.com/sug",
    data:{q:keywordValue},
    success:function(data){
        console.log(data);
    },
    dataType:"jsonp",
    jsonp:"callback",
    jsonpCallback:"hhhh"
})

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得