原生js,實現跨越的jsonp


(function (window,document) {
    "use strict";
    var jsonp = function (url,data,callback) {

        // 1.將傳入的data數據轉化為url字符串形式
        // {id:1,name:'zhangsan'} => id=1&name=zhangsan
        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);
        }

        // 5.append到頁面中
        document.body.appendChild(scriptEle);
    }

    // 因為jsonp是一個私有函數外部不能調用,所有jsonp函數作文window對象的一個方法,供外部調用
    window.$jsonp = jsonp;

})(window,document)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM