【VanillaJS】Spring+Thymeleaf＋JSONでAjaxを実装する方法【jQuery無し】

//　@{/js/各自の名前.js}の部分は\src\main\resources\static以下にファイルを置いた際のパスです。
<script th:src="@{/js/schedule-top.js}" type="text/javascript" ></script>

//SpringへのPathを用意する
<input type="hidden" id="ajax_uri" th:value="@{/schedule/top}">

<div id="date">
    <div class="year-wrapper">
    <p class="display-month" id="year" th:text="${scheduleIndexForm.calendar.get('year')}"></p>
    <p>年</p>
    </div>
    <div class="day-wrapper">
    <p class="display-month" id="month" th:text="${scheduleIndexForm.calendar.get('month')}"></p>
    <p>月</p>
    </div>
</div>

//window.onloadにfunctionを設定することにより、画面の読み込みが終わった後に自動で実行される処理を記述できます。
window.onload = function () {
　　//画面の年月を取得する
    let year = document.getElementById("year").textContent;
    let month = document.getElementById("month").textContent;

　　//Springに引き渡すデータをJSON型にしておく
    let formData = JSON.stringify({
        "calendar":{
            "year" : year,
            "month" : month
        }
    });

    //次月へボタン押下時処理
    let nextMonth = document.getElementById("next-month");
    nextMonth.addEventListener("click", function () {

　　　　//HTML部分で追加したPathをdocument.querySelector("#ajax_uri").valueで指定する。
        doAjaxPost(formData, document.querySelector("#ajax_uri").value, function(resData){
　　　　　　//Ajaxから正常にデータが返ってきたときの処理
            console.log('OK');

        });

    });

}

//POST通信のajax処理
function doAjaxPost(data, url, callback){
　　//リクエストのデータ
    let request = new XMLHttpRequest();
　　
　　//サーバーのステータスが変わった場合かつ正常に終わった場合Springから受け取ったデータをもとの処理へ返す処理を定義
    request.onreadystatechange = function () {

　　　　//readyStateが4の場合サーバのレスポンスの受信が完了
　　　　//statusが200の場合は通信が成功していることを表す
        if(request.readyState == 4 && request.status == 200){
            try{
                //responseTextにするとjsonは受け取れない
                callback(request.response);
                return;
            }catch(err){
                console.log(err.message);
                return;
            }
        }
        return;
    }
　　
　　//どういう形で通信を行うか指定(第三引数は省略可、trueにすることで非同期通信となる)
    request.open("POST", url , true);
　　
　　//サーバーへ渡すデータタイプをここで指定、今回はJSONの書き方
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

　　//戻ってくるデータをJSON型で受け取ることを宣言
    request.responseType = "json";

　　//準備ができたらデータを送る
    request.send(data);


}

　　//POST通信の場合はRequestMethod.POSTと記述
　　@RequestMapping(path="schedule/top", method=RequestMethod.POST)
　　//AjaxをSpringで処理したい場合にResponseBodyの記述が必要
    @ResponseBody
　　
　　//基本的には文字列を返すがAjaxの場合は必要な情報のみ返すので戻り値をその都度変更
　　//@RequestBodyはHTMLから送られてきたJSONのデータをどのクラスで受け取るかを指定するもの
    public ScheduleIndexForm makeAjaxCalendar(@ModelAttribute(FORM_NAME) ScheduleSessionForm session,@RequestBody ScheduleIndexForm scheduleIndexForm, Model model) throws Exception{
　　　　//中略
        return new ScheduleIndexForm();
    }

let formData = JSON.stringify({
        "calendar":{
            "year" : year,
            "month" : month
        }
    });

public class ScheduleIndexForm {
    //カレンダー作成に必要な情報保持
    private Map<String, String> calendar;
//以下略