練習封裝jsonp方法

練習封裝jsonp方法

<button>點我發送資料1</button>
    <button>點我發送資料2</button>
    //=> JS代碼
    <script>
        let button1 = document.querySelectorAll('button')[0];
        let button2 = document.querySelectorAll('button')[1];

        function jsonp(options) {
            // 動态建立script标簽
            var script = document.createElement('script');
            // 拼接字元串
            var params = '';
            for (let key in options.data){
                params += `&${key}=${options.data[key]}`;
            }
            console.log(params);
            //  随機名字(防止window方法名覆寫)
            var fnName = 'myJsonp'+Math.random().toString().replace('.','');
            // 它不是一個全局函數，要把它變成全局函數
            // 挂載到window中
            window[fnName] = options.success;
            // 為script标簽添加src屬性
            script.src = options.url + `?callback=${fnName}${params}`;
            // script标簽追加到頁面中
            document.body.appendChild(script);
            // 為script标簽onload事件
            script.onload = function () {
            //=> 删除script标簽
                document.body.removeChild(script);
            }
        }
        button1.onclick = function () {
            jsonp({
                url: "http://localhost:3001/test",
                data:{
                    username:'jun',
                    age:16
                },
                success: function(data){
                    console.log('我是第一個按鈕');
                    console.log(data);
                }
            })
        }
        // 兩個按鈕的挂載到window的方法不會沖突
        button2.onclick = function () {
            jsonp({
                url: "http://localhost:3001/test",
                success: function(data){
                    console.log('我是第二個按鈕');
                    console.log(data);
                }
            })
        }