全面分析前端的网络请求方式

fetch、axios等并没有直接提供对jsonp的支持，如果需要使用这种方式，我们可以尝试进行手动封装： 

(function (window,document) {  
    "use strict";  
    var jsonp = function (url,data,callback) {  
        // 1.将传入的data数据转化为url字符串形式  
        // {id:1,name:'jack'} => id=1&name=jack  
        var dataString = url.indexof('?') == -1? '?': '&';  
        for(var key in data){  
            dataString += key + '=' + data[key] + '&';  
        };  
        // 2 处理url中的回调函数  
        // cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）  
        var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.','');  
        dataString += 'callback=' + cbFuncName;  
        // 3.创建一个script标签并插入到页面中  
        var scriptEle = document.createElement('script');  
        scriptEle.src = url + dataString;  
        // 4.挂载回调函数  
        window[cbFuncName] = function (data) {  
            callback(data);  
            // 处理完回调函数的数据之后，删除jsonp的script标签  
            document.body.removeChild(scriptEle);  
        }  
        document.body.appendChild(scriptEle);  
    }  
    window.$jsonpjsonp = jsonp;  
})(window,document)  

postMessage跨域

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!