Memilih Metode AJAX jQuery: $.ajax, $.get, atau $.post

Form pencarian yang memuat hasil tanpa reload, tombol simpan yang mengirim data ke server di latar belakang, atau daftar komentar yang bertambah sendiri. Semua itu butuh permintaan HTTP dari JavaScript, dan jQuery menyediakan tiga pintu masuk yang paling sering dipakai: $.ajax, $.get, dan $.post. Memilih di antara ketiganya bergantung pada seberapa banyak kendali yang kamu perlukan atas permintaan tersebut.

Ketiga fungsi ini memakai mesin yang sama di baliknya. $.get dan $.post adalah pembungkus tipis untuk $.ajax dengan beberapa opsi sudah terisi. Perbedaannya terletak pada seberapa banyak yang harus kamu tulis sendiri.

Ringkasan perbedaan sebelum masuk ke contoh

$.ajax: kendali penuh saat permintaan mulai rumit

Bentuk paling panjang dari ketiganya, tapi juga yang paling jelas maksudnya. Semua pengaturan ditulis sebagai objek, sehingga mudah dibaca ulang saat kode ditinggalkan berbulan-bulan.

$.ajax({
  url: '/api/produk',
  method: 'GET',
  dataType: 'json',
  timeout: 5000
}).done(function (data) {
  renderProduk(data);
}).fail(function (xhr, status) {
  tampilkanPesan('Gagal memuat: ' + status);
});

Pakai $.ajax ketika kamu perlu mengatur header seperti token otorisasi, menentukan contentType untuk payload JSON, memasang timeout, atau membedakan jenis kegagalan. Callback fail menerima objek xhr berisi status HTTP, jadi kamu bisa menampilkan pesan berbeda untuk 404 dan 500.

Kelemahannya hanya satu: lebih banyak baris. Kalau permintaanmu sederhana, tulisan tambahan itu tidak memberi manfaat apa pun.

$.get: mengambil data tanpa mengubah apa pun di server

Fungsi ini mengirim permintaan GET ke URL yang kamu berikan, dengan parameter opsional yang otomatis diubah menjadi query string.

$.get('/api/kategori', { aktif: 1 }, function (data) {
  isiDropdown(data);
}, 'json');

Hasilnya setara dengan memanggil /api/kategori?aktif=1. Cocok untuk memuat daftar, mengambil potongan HTML untuk dimasukkan ke halaman, atau mengecek ketersediaan data. Kalau kamu baru mulai memindahkan konten ke halaman, pola ini mirip dengan yang dibahas di cara manipulasi DOM dengan jQuery untuk pemula: ambil datanya, lalu sisipkan ke elemen yang sudah ada.

Satu hal yang perlu diingat: permintaan GET bisa di-cache browser. Kalau responsnya berubah-ubah dan kamu tidak ingin versi lama muncul, tambahkan opsi cache: false. Opsi itu tidak tersedia di $.get, jadi di titik ini kamu harus pindah ke $.ajax.

$.post: mengirim data ke server

Bentuknya hampir sama dengan $.get, bedanya data dikirim di body permintaan dan tidak muncul di URL.

$.post('/api/komentar', {
  id_artikel: 42,
  isi: 'Terima kasih penjelasannya.'
}, function (respons) {
  tambahKomentarKeDaftar(respons);
}, 'json');

Gunakan $.post untuk menyimpan, memperbarui, atau menghapus data. Karena datanya tidak terlihat di address bar, ini juga pilihan yang lebih rapi untuk form yang isinya tidak perlu di-bookmark.

Yang sering terlewat: $.post mengirim data sebagai application/x-www-form-urlencoded, bukan JSON. Kalau endpoint-mu mengharapkan JSON, siapkan sendiri lewat $.ajax dengan contentType: 'application/json' dan JSON.stringify pada data.

Menangani hasil dan kegagalan di ketiga fungsi

Ketiganya mengembalikan objek jqXHR, jadi pola done, fail, dan always berlaku sama.

• done dipanggil saat server membalas dengan status sukses. Di sinilah kamu memproses data.
• fail dipanggil untuk status error, timeout, atau koneksi terputus.
• always berjalan pada dua kondisi di atas, berguna untuk menyembunyikan indikator loading.

Kalau kamu terbiasa dengan callback gaya lama, argumen ketiga pada $.get dan $.post bisa diisi tipe data, sedangkan fungsi callback-nya menerima data, status teks, dan objek jqXHR. Menambahkan fail setelahnya tetap bisa dilakukan karena objek yang dikembalikan adalah promise.

Kesalahan yang sering muncul saat berpindah antar fungsi

Beberapa jebakan baru terasa setelah kode berjalan di server sungguhan.

1. Mengira $.post otomatis mengirim JSON. Yang terkirim adalah form-encoded.
2. Memakai $.get untuk operasi yang mengubah data. Permintaan GET seharusnya tidak memiliki efek samping, dan beberapa server atau proxy memperlakukannya demikian.
3. Lupa menangani error sama sekali pada $.get dan $.post. Tanpa fail, pengguna hanya melihat halaman diam saat permintaan gagal.
4. Menaruh logika sukses di dua tempat berbeda. Pilih satu pola dan pakai konsisten di seluruh berkas.

Saat halaman sudah punya beberapa permintaan yang saling bergantung, misalnya memuat daftar lalu mengambil detail item pertama, susun rantai lewat done atau gunakan $.when untuk menjalankan beberapa permintaan sekaligus. Menggabungkannya dengan event seperti klik tombol akan terasa lebih rapi jika kamu memahami urutan pemanggilannya, topik yang dibahas di mengenal event jQuery: click, change, dan submit.

Ringkasan pilihan

Mulai dari $.get atau $.post kalau permintaannya sederhana dan kamu hanya butuh data masuk atau keluar. Begitu muncul kebutuhan header khusus, timeout, pembeda status error, atau pengiriman JSON, pindahkan permintaan itu ke $.ajax. Keduanya memakai mesin yang sama, jadi perpindahan tidak mengubah bagian pemrosesan data yang sudah kamu tulis.

Pertanyaan yang Sering Diajukan

Apakah $.get dan $.post bisa dipakai untuk mengirim JSON?

Bisa, tapi tidak langsung. Keduanya mengirim data sebagai form-encoded secara default. Untuk payload JSON, gunakan $.ajax dengan contentType: 'application/json' dan ubah objek data memakai JSON.stringify.

Apa bedanya $.get dengan permintaan GET biasa lewat fetch?

Secara protokol sama. Bedanya di lapisan API: $.get mengembalikan objek jqXHR dengan metode done dan fail, serta otomatis mengubah objek data menjadi query string. Kalau proyekmu sudah tidak memakai jQuery, fetch lebih masuk akal.

Kapan sebaiknya tidak memakai AJAX jQuery sama sekali?

Saat halaman tidak butuh pembaruan sebagian, misalnya form yang boleh melakukan reload penuh setelah submit. Permintaan AJAX menambah lapisan yang harus diurus, termasuk penanganan error dan indikator loading, tanpa memberi manfaat bagi pengguna.