79.AJAX.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .rect {
            position: relative;
            width: 800px;
            height: 600px;
            background-color: rgb(248, 232, 232);
            border: 1px solid black;
        }

        .ball {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgb(245, 216, 52);
            border: 1px solid black;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="rect"></div>
    <button onclick="loadData()">load data</button>
    <script>
        const rect = document.querySelector(".rect");
        let bIndex = 0;
        let data = [];

        const drawBall = ({ size, x, y, bgc }) => {
            const b = document.querySelector("div");
            b.className = "ball";

            b.style.backgroundColor = bgc;
            b.style.left = x + "px";
            b.style.top = y + "px";
            b.style.height = b.style.width = size + "px";

            rect.appendChild(b);
        }

        const doStep = () => {
            if (bIndex >= data.length) return;
            const b = data[bIndex];
            drawBall(b);
            bIndex++;
            setTimeout(doStep, 10);
        };

        const loadData = () => {
            const xhr = new XMLHttpRequest();
            console.log(1);
            xhr.onload = function () {
                console.log(2);
                console.log(xhr.responseText);
                data = JSON.parse(xhr.responseText);
                doStep();
            };
            xhr.open("GET", "data/data02.json");
            xhr.send();
            console.log(3);
        };
    </script>
</body>

</html>