AJAX: fetch di browser

Ambil data dari API tanpa reload + update DOM.

Pahami konsepnya

AJAX (Asynchronous JavaScript and XML — sekarang JSON) memungkinkan halaman mengambil data dari server TANPA reload. fetch() mengembalikan Promise; await memberi Response; response.json() memberi data. Setelah data tiba, update DOM dengan createElement/innerHTML.

Pola lengkapnya: (1) fetch ke API endpoint; (2) periksa response.ok; (3) parse JSON; (4) iterasi hasil dan bangun elemen DOM; (5) sisip ke container. Bungkus dengan async/await + try/catch untuk error handling.

CORS (Cross-Origin Resource Sharing) adalah kebijakan keamanan browser: fetch ke domain BERBEDA diblokir kecuali server mengizinkan lewat header Access-Control-Allow-Origin. Gunakan API publik yang sudah mengizinkan CORS, atau proxy server sendiri.

Coba contoh kode

<!doctype html>
<html>
<body>
  <ul id="hasil"></ul>
  <script>
    async function muatUser() {
      try {
        const resp = await fetch("https://jsonplaceholder.typicode.com/users");
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);

        const users = await resp.json();
        const ul = document.getElementById("hasil");

        users.slice(0, 5).forEach(u => {
          const li = document.createElement("li");
          li.textContent = `${u.name} — ${u.email}`;
          ul.appendChild(li);
        });
      } catch (e) {
        console.error("Gagal:", e.message);
      }
    }
    muatUser();
  </script>
</body>
</html>

fetch mengambil data dari API publik, json() mem-parsing, forEach membangun li untuk tiap user lalu appendChild menyisip. try/catch menangkap network error dan HTTP error.

Latihan singkat

Uji: simulasi fetch dengan Promise yang resolve data — tampilkan nama pertama.