Advertisement
  1. Web Design
  2. Ajax

Panduan Pemula ke AJAX dengan jQuery

by
Read Time:3 minsLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Example of AJAX With Vanilla JavaScript
How to Use jQuery’s “ajax” Function

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Pada artikel pertama dari seri ini, kita telah membahas dasar-dasar dari AJAX. Di yang kedua, kita membuat contoh dengan vanilla JavaScript.

Pada panduan ini, kita akan pergi ke beberapa fungsi dan metode AJAx milik jQuery. Secara lebih spesifik, kita akan melihat lebih dekat metode load dan fungsi umum ajax

Menggunakan metode load

Metode load jQuery sederhana dan bertenaga untuk mengambil data jarak jauh. di bawah ini kamu bisa melihat sintaks-nya:

Tabel berikut menunjukkan parameter yang mungkin:

Parameter Deskripsi Dibutuhkan
url Sebuah string mengandung url dimana permintaan dikirim. Ya
data Datanya (dalam bentuk string atau objek biasa) yang dikirim ke server dengan permintaannya. Tidak
complete Fungsi pemanggil kembali yang di \eksekusi saat permintaannya selesai, baik sukses maupun tidak. Tidak

Berikut adalah parameter dari fungsi callback:

Parameter Deskripsi
responseText data yang didapat dari permintaan.
textStatus Sebuah string yang mengkategorisasikan status dari permintaan.
jqXHR Objek jQuery XMLHttpRequest (jqXHR) yang merupakan superset dari objek XMLHttpRequest (XHR) bawaan browser.

Daftar berikutnya merangkum nilai yang mungkin dari parameter textStatus.

Untuk memahami cara kerja metode load dengan lebih baik, mari kunjungi kembali contoh yang dibahas pada panduan sebelumnya.

Sekali lagi, lihat pada struktur HTML sederhana ini:

Beginilah penampilannya:

Example

Ingat bahwa kita ingin memperbaharui konten dari elemen #bio dengan data respon, sesaat setelah tombolnya diklik.

Berikut kode jQuery yang dibutuhkan:

Dengan asumsi permintaannya sukse (yaitu saat textStatus nya success atau notmodified), hasil akhirnya akan terlihat seperti ini:

success_jQuery

Dan juga, pertimbangkan visualisasi berikut yang menjelaskan permintaan yang sukses.

Javascript_jQuery_Objects

Bagian kiri dari visualisasi menunjukkan objek XHR sebagaimana dia dicetak di konsol browser jika menggunakan JavaScript murni (lihat panduan sebelumnya) untuk membuat permintaan. Di sisi lain, bagian kanan menampilkan objek jqXHR sebagaimanadia dicetak dengan metode load.

Dalam kasus permintaan yang tidak sukses, sebuah pesan akan muncul. Untuk melakukannya, kita mengawasi nilai dari parameter textStatus dan menampilkan sebuah pesan error:

error_jQuery

Catatan: Jika kamu menjalankan contoh dari lingkungan lokal (dan menyimpan berkas Bio.txt di dalamnya) pesan error-nya mungkin akan berbeda. Contohnya, kamu mungkin akan melihat contoh berikut:

error_locale_jQuery

Terakhir, penting untuk disebut, secara bawaan, metode load menggunakan metode GET HTTP, kecuali kita mengirim data sebagai objek ke server. Hanya setelahnya, metode POST dapat dipanggil.

Lihat demo Codepen yang relevan berikut:

Sekarang, mari modifikasi format dari berkas yang kita minta dari server. Secara spesifik, untuk contoh ini, data yang dinginkan termasuk dalam Bio.html bukan di berkas Bio.txt. Penting juga untuk dicatat: berkas targetnya berisi dua paragraf.

Dengan asumsi bahwa kita hanya ingin memuat paragraf pertama, kita akan memperbaharui kode awal sebagai berikut:

Seperti ini penampilannya:

success_jQuery_trim

Dan ini demo Codepen:

Kesimpulan

Di panduan ini, saya mendemonstrasikan caramu menggunakan AJAX dengan jQuery.  Untuk membuatnya lebih menarik, kita juga bekerja dengan beberapa contoh praktik. Di beberapa panduan terakhir seri ini, kita akan merangkum dengan mengerjakan contoh yang lebih menantang.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.