JS Async: 04. AJAX: menerima data di AJAX

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>AJAX: Menerima data di AJAX</title>
  </head>
  <body>
    <h1 id="response"></h1>
    <script>
      const ajax = new XMLHttpRequest();
      ajax.open("GET", "api/hello.json");

      // menambahkan AJAX Callback pada event load
      // ajax.addEventListener("jenisEvent", Callback);
      ajax.addEventListener("load", function () {
        const json = JSON.parse(ajax.responseText); // mengambil data response dari server

        const header = document.getElementById("response");
        header.textContent = json.sayHello;
      });
      ajax.send();
    </script>
  </body>
</html>

JavaScript

// file: hello.json
{
  "sayHello": "Hello Programmer Zaman Now"
}