原生js實現jsonp和jQuery jsonp實現

<button onclick="one()">jquery jsonp</button>
<button onclick="two()">原生js jsonp</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
	// jquery實現
    function one() {
        $.ajax({
            url: '/test'
            , dataType: 'jsonp'
            , jsonp: 'callbackName' // 回調函數參數名稱
            // 回調函數參數值 默認jquery會生成隨機名稱
            , jsonpCallback: 'test'
            , data: {
                name: 'lilei'
            }
            , success: function (data) {
                console.log(data);
            }
        });
    }

    // 原生js實現
    function two() {
        jsonp({
            url: '/test'
            , callbackName: 'callbackName'
            , data: {name: 'lilei'}
            , callback: function (response) {
                console.log(response);
            }
        });
    }

    // 手寫jsonp函數
    function jsonp(object) {

        // 回調函數名
        let callbackName = 'callbackName';
        // url參數拼接
        if (object.url.indexOf('?') < 0) {
            object.url += '?';
        }
        // data參數拼接
        for (let key in object.data) {
            object.url += '&' + key + '=' + object.data[key];
        }

        object.url += '&' + object.callbackName + '=' + callbackName;
        // 創建script標籤
        let script = document.createElement('script');
        // 將方法註冊到全局
        window[callbackName] = function (response) {
            try {
                object.callback(response);
            } catch (e) {
                console.log(e);
            } finally {
                // 刪除該函數和script元素
                script.parentNode.removeChild(script);
                delete window[callbackName];
            }
        }
        script.src = object.url;
        document.getElementsByTagName('body')[0].appendChild(script);
    }
</script>

後端

@GetMapping("test")
public JSONPObject test(@RequestParam(required = false) String callbackName, String name) {
    @Data
    @AllArgsConstructor
    class User {
        private String name;
    }
    // 返回jackson的JSONPObject對象會解析成js對象的格式
    // name({"data":"xxxx"]})而不是{"name": {"data":"xxxx"}}
    return new JSONPObject(callbackName == null ? "name" : callbackName
            , new HashMap<String, List<User>>() {{
        put("data", new ArrayList<User>() {{
            for (int i = 0; i < 2; i++) {
                add(new User(i + name));
            }
        }});
    }});
}