JS Async: 07. AJAX: Mengirim data dengan AJAX

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Send JSON</title>
</head>
<body>
<form>
    <label for="username">Username:
        <input type="text" id="username" name="username">
    </label>
    <br>
    <label for="password">Password:
        <input type="password" id="password" name="password">
    </label>
    <br>
    <input type="button" id="login" value="Login">
</form>
<h1 id="response"></h1>
<script>

    function doLogin() {
        const ajax = new XMLHttpRequest();
        ajax.open("POST", "https://javascript-async.free.beeceptor.com");
        // callback function (jika request sukses);
        ajax.onload = function () {
            const response = document.getElementById("response");
            response.innerText = ajax.responseText;
        }
        ajax.setRequestHeader("Content-Type", "application/json");

        const json = {
            username: document.getElementById("username").value,
            password: document.getElementById("password").value
        };

        ajax.send(JSON.stringify(json));
    }

    document.getElementById("login").onclick = doLogin;

</script>
</body>
</html>