AJAX & Fetch API: Ambil Data Tanpa Reload Halaman

Kali ini kita bakal bahas teknik keren supaya website kamu bisa ambil data dari server tanpa reload halaman. Kita akan pelajari dua cara populer: AJAX (XMLHttpRequest) dan Fetch API. Siap bikin website lebih dinamis? Yuk!

Apa Itu AJAX?

AJAX (Asynchronous JavaScript and XML) adalah teknik klasik yang pakai objek XMLHttpRequest untuk mengirim/menerima data tanpa reload halaman—biasanya pakai format JSON sekarang, bukan XML lagi :contentReference[oaicite:1]{index=1}.

// Contoh AJAX GET sederhana
let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let res = JSON.parse(xhr.responseText);
    console.log(res);
  }
};
xhr.send();

Kenalan dengan Fetch API

Fetch API adalah cara modern untuk request data di browser—berbasis Promises, sintaksnya lebih ringkas, dan handling lebih simpel :contentReference[oaicite:2]{index=2}.

// Contoh Fetch GET sederhana
fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('Network error');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('Fetch error', err));

Perbandingan AJAX vs Fetch

Sintaks: Fetch lebih ringkas dan modern; AJAX pakai callback yang lebih verbose.
Handling response: Fetch punya .json(), .text(), dll.; AJAX pakai responseText lalu parse manual :contentReference[oaicite:3]{index=3}.
Error handling: Fetch punya .catch(); AJAX manual cek xhr.status.
Dukungan browser: AJAX didukung semua browser, termasuk lawas; Fetch butuh polyfill di browser tua :contentReference[oaicite:4]{index=4}.
CORS & advanced: Fetch punya support CORS lebih otomatis; AJAX butuh konfigurasi manual :contentReference[oaicite:5]{index=5}.

Tips Pakai Fetch API

Selalu cek `response.ok` agar bisa tangani HTTP error.
Gunakan `.json()` untuk parsing data JSON secara otomatis.
Untuk browser lama, tambahkan polyfill seperti whatwg-fetch.
Kalo butuh progress upload/download, AJAX masih unggul.

Contoh Project Sederhana: Ambil Daftar Pengguna

<button id="load-user">Ambil Data User</button>
<ul id="list"></ul>

<script>
const btn = document.getElementById('load-user');
const ul = document.getElementById('list');

btn.addEventListener('click', () => {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => {
      if (!res.ok) throw new Error(res.status);
      return res.json();
    })
    .then(users => {
      ul.innerHTML = users.map(u => `${u.name} (${u.email})`).join('');
    })
    .catch(err => console.error(err));
});
</script>

Kenapa Ini Penting untuk SEO & UX?

Website interaktif bikin user betah, tapi jangan lupa optimasi SEO:

Pastikan konten penting termuat saat page load (untuk crawler).
Jangan terlalu banyak fetch berulang-ulang (berpotensi bikin page lambat).
Fokus pada respons cepat & efisien.

Sekarang kamu udah paham bedanya AJAX dan Fetch API—mana yang klasik, mana yang modern, plus bagaimana cara praktis pakainya. Selanjutnya kita bakal belajar Async/Await untuk bikin kode asinkron jadi lebih mudah dibaca. Jadi, jangan berhenti ngoding ya! 🚀