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);
                }
            })
        }