26. Pengantar API dan AJAX

API dan AJAX merupakan fondasi dari aplikasi web modern yang dinamis. Dengan memahami keduanya, Anda bisa membuat halaman web yang bisa memuat data dari server secara otomatis tanpa harus memuat ulang halaman.

Pada modul ini, kita akan mengenal konsep API (Application Programming Interface) dan teknik AJAX untuk mengambil data secara dinamis tanpa perlu me-refresh halaman web.

Apa itu API?

API adalah antarmuka yang memungkinkan aplikasi berkomunikasi dengan aplikasi lain. Misalnya, mengambil data cuaca dari layanan eksternal untuk ditampilkan di website Anda.

Apa itu AJAX?

AJAX (Asynchronous JavaScript and XML) memungkinkan web page mengirim dan menerima data secara asinkron tanpa me-reload halaman, membuat pengalaman pengguna lebih lancar.

Contoh AJAX menggunakan Fetch API


// Mengambil data JSON dari API publik
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => {
    document.getElementById('output').textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => console.error('Error:', error));

Demo Interaktif: Mengambil Data dari API

Berikut ini adalah contoh penerapan AJAX menggunakan Fetch API untuk mengambil data JSON dari API publik jsonplaceholder.typicode.com:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

Pertanyaan Umum tentang API dan AJAX

Apa perbedaan antara API dan AJAX? API adalah antarmuka untuk mengakses data, sedangkan AJAX adalah teknik untuk mengambil data dari API secara asinkron.
Apakah AJAX masih digunakan di era modern? Ya, meskipun sekarang lebih sering menggunakan fetch atau axios daripada XMLHttpRequest.
Apakah Fetch API hanya bisa mengambil data JSON? Tidak. Fetch API dapat digunakan untuk mengambil berbagai jenis data seperti teks, blob, atau HTML.

Setelah memahami dasar API dan AJAX, di bagian selanjutnya Anda akan mempelajari lebih lanjut tentang penggunaan API dengan metode POST dan bagaimana menangani respons yang lebih kompleks.