js - 原生ajax访问后台读取数据并显示在页面上

1.前台调用ajax访问后台方法，并接收数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>success</title>
</head>
<script type="text/javascript">
    function ajax(url, fnSucc) {
        if (window.XMLHttpRequest) {
            var oAjax = new XMLHttpRequest();
        } else {
            var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
        }
        oAjax.open("GET", url, true);//把要读取的参数的传过来。
        oAjax.send();
        oAjax.onreadystatechange = function () {
            if (oAjax.readyState == 4) {
                if (oAjax.status == 200) {
                    fnSucc(oAjax.responseText);//成功的时候调用这个方法
                } else {
                    if (fnfiled) {
                        fnField(oAjax.status);
                    }
                }
            }
        };
    }

    function change() {
        ajax('/abc2?user="wangerxiao"', function (str) {
            alert(str);
        })
    }
</script>
<body>
<h1>this is success page</h1>
<h2>${msg}</h2>
<div class="form" style="width: 100px;height: 100px;background-color: red" onclick="change()">
</div>
</body>
</html>

2.后台处理请求返回数据map以及list

@Controller
public class HelloController {
    @GetMapping("/abc2")
    @ResponseBody
    public Map<String,Object> hello2(@RequestParam("user")String user){
        System.out.println(user);
        List<String> list = new ArrayList<>();
        list.add("a");
        list.add("b");
        list.add("c");
        Map<String,Object> map = new HashMap<>();
        map.put("1","王二小");
        map.put("2","刘明");
        map.put("3","张三");
        return map;
    }
}