初心者なのですが、このプログラムにコメントしてさらに詳しく動きを説明してほしいです。理解したいです。

js
1let t_past = 0; // 前回の受信時刻
2
3document.addEventListener('DOMContentLoaded', function () {
4    // 各所にイベントリスナーを設置する．これは，HTML読み込み完了時に動作する．
5
6    class webConnector extends XMLHttpRequest {
7        constructor() {
8            super();
9            this.addEventListener('loadstart', function () {
10                window.alert(this.url + "と通信を開始しました");
11            }, false); //通信開始時の処理
12            this.addEventListener('load', function () {
13                let data = this.response;
14                
15                // 受信時刻を更新
16                let d = new Date();
17                let ut = d.getTime();
18                t_past = ut;
19                
20                show(data);
21			}, false); //通信成功時処理
22            this.addEventListener('error', function () {
23                window.alert(this.url + "との通信に失敗しました");
24            }, false); //通信失敗時処理
25        }
26    }
27    let xhr = new webConnector();
28
29    document.getElementById('button').addEventListener('click', function () {
30        let name = document.getElementById('name').value;
31        let message = document.getElementById('message').value;
32
33        // 変更 送信時刻も送る
34        let d = new Date();
35        let ut = d.getTime();
36        let url = "./cgi-bin/serverSide_kadai7.py?" + "name=" + name + "&message=" + message + "&ut=" + ut + "&t_past=" + t_past;
37
38        xhr.open("GET", url);
39        xhr.responseType = 'json';
40        xhr.url = url;
41        xhr.send(null);
42    }, false);
43
44}, false);
45
46
47function show(data) {
48
49    let result = document.getElementById('result');
50
51    if (data === null) {
52        result.textContent = 'メッセージはありません';
53    } else {
54        let text = "";
55        for(let dictionary of data) {
56            text += "<ul><li>" + dictionary['name'] + "<ul><li>「" + dictionary['message'] + "」</li></ul></li></ul>";
57        }
58        result.innerHTML += text;
59    }
60}
61

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8" />
6    <title>自作APIからメッセージを得るやーつ</title>
7</head>
8
9<body>
10
11    <input id="name" type="text" size="30" value="名前" />
12    <br />
13    <input id="message" type="text" size="30" value="メッセージ" />
14    <input id="button" type="button" value="送信" />
15    <div id="result"></div>
16    <hr />
17
18    <script type="text/javascript" src="serverSide_kadai7.js"></script>
19</body>
20
21</html>