Belajar jQuery (Part 6) - AJAX dengan jQuery

AJAX merupakan singkatan dari “Asynchronous Javascript and XML”. Fungsinya adalah untuk mengirim dan menerima data dari server tanpa melakukan refresh pada halaman. AJAX menggunakan jQuery akan jadi lebih mudah dibandingkan menggunakan langsung javascript tanpa jQuery. Penggunaan AJAX pada jQuery biasanya dilalukan dengan cara berikut :

$.ajax({

     url: http://contoh.com,

     data: nama=Garuda,

     method: POST

}).done(function(data) {

     // Aksi jika request berhasil

}).fail(function(xhr) {

     // Aksi jika request gagal

}).always(function(){

     // Aksi setelah request selesai (berhasil/gagal)

});

Pada kode di atas dapat dilihat fungsi $.ajax memerlukan beberapa parameter yang perlu diberikan yaitu parameter ‘url’ yang menunjukkan link URL tempat AJAX akan mengirim request, parameter ‘data’ yang menunjukkan data yang akan dikirim, serta parameter ‘method’ yang menunjukkan metode pengiriman request. Parameter ‘data’ dan ‘method’ tidak harus ada jika ingin menggunakan metode pengiriman ‘GET’ dan tanpa data sama sekali.

Selanjutnya dengan melakukan pemanggilan fungsi ‘done’ yang berfungsi untuk mendapatkan data hasil request ke server jika berhasil (jika status dari server menunjukkan status 200 sampai 299). Data yang diperoleh dapat dimanipulasi dan ditampilkan pada halaman HTML dengan penggunaan fungsi-fungsi jQuery yang telah kita pelajari sebelumnya. Fungsi ‘fail’ digunakan untuk melakukan aksi ketika request gagal dikirim ke server dengan alasan apapun (jika status dari server menunjukkan status bukan 200 sampai 299). Fungsi ‘always’ digunakan jika request telah dijalankan dan fungsi ‘done’ dan ‘fail’ telah selesai dieksekusi. Fungsi ‘fail’ dan fungsi ‘always’ tidak harus digunakan dalam penggunaan AJAX dengan jQuery jika tidak membutuhkannya.

Mungkin sekian saja tutorial penggunaan AJAX ini, sebenarnya tidak terlalu rumit jika penggunaan fungsi-fungsi jQuery lain yang ada pada artikel-artikel sebelumnya telah dimengerti. Parameter-parameter yang digunakan pada AJAX sendiri sebenarnya ada banyak dan bisa dilihat pada dokumentasi resmi jQuery http://api.jquery.com/jquery.ajax/.