UNESA
d4mi@unesa.ac.id

Memahami AJAX dalam Pengembangan Web

Memahami AJAX dalam Pengembangan Web

- kategori Pengetahuan 199 Views

1. Pendahuluan

AJAX (Asynchronous JavaScript and XML) adalah teknik dalam pengembangan web yang memungkinkan browser berkomunikasi dengan server secara asinkron tanpa harus memuat ulang seluruh halaman. Teknologi ini membuat aplikasi web menjadi lebih cepat, responsif, dan terasa seperti aplikasi desktop.

Meskipun namanya mengandung kata XML, AJAX tidak terbatas pada XML; format modern yang lebih umum digunakan adalah JSON.

2. Apa Itu AJAX?

AJAX bukanlah bahasa pemrograman, melainkan kombinasi beberapa teknologi:

  • JavaScript – untuk mengirim/ menerima data ke server

  • XMLHttpRequest (XHR) atau Fetch API – untuk melakukan request asinkron

  • HTML & DOM – untuk menampilkan data yang diterima

  • JSON/XML – sebagai format data yang dikirim

Dengan AJAX, halaman web dapat diperbarui sebagian tanpa melakukan reload penuh. Contoh penggunaan: pencarian otomatis Google, notifikasi real-time, dan pengambilan data tabel secara dinamis.

3. Cara Kerja AJAX

Berikut alur kerja AJAX secara sederhana:

  1. Pengguna melakukan aksi → klik tombol, ketik di kolom pencarian, dll.

  2. JavaScript membuat permintaan (request) ke server.

  3. Server memproses permintaan dan mengembalikan data.

  4. JavaScript menerima respons.

  5. Halaman web diperbarui sebagian tanpa reload.

4. Contoh Sederhana AJAX dengan Fetch API (Modern JavaScript)

Request GET

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('result').innerHTML = data.message;
  })
  .catch(error => console.log(error));

Request POST

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Faris' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));

5. Contoh AJAX dengan jQuery

jQuery dulu sangat populer untuk AJAX karena sintaksnya simpel.

GET

$.get("data.php", function(response){
    $("#result").html(response);
});

POST

$.post("submit.php", { name: "Faris" }, function(data){
    console.log(data);
});

6. Manfaat AJAX

  • Tidak reload halaman → pengalaman pengguna lebih halus

  • Kinerja meningkat → hanya data yang dibutuhkan yang dimuat

  • Interaktif → cocok untuk aplikasi real-time

  • Hemat bandwidth

7. Kekurangan AJAX

  • Tidak bekerja jika JavaScript dinonaktifkan

  • Bisa mempersulit SEO (meski SPA modern sudah lebih baik)

  • Dapat menyebabkan masalah keamanan jika tidak menggunakan validasi server-side

  • Debugging terkadang lebih rumit

8. Penggunaan AJAX dalam Aplikasi Modern

Teknologi web saat ini banyak menggunakan AJAX, misalnya:

  • Single Page Application (SPA) seperti React, Vue, Angular

  • Real-time dashboard

  • Live search

  • Infinite scroll

  • Chat web

Framework modern menggunakan abstraction di atas AJAX melalui Fetch, Axios, atau API bawaan framework.

Scroll to Top