Mengunjungi website yang terlalu banyak reload setiap kali klik fitur-fiturnya tentu menyebalkan, bukan? Belum lagi kalau ternyata loading website tersebut lemot. 

Untungnya ada AJAX yang biasa digunakan oleh web developer. Website jadi tak perlu direload setiap kali pengunjung klik fitur tertentu, seperti fitur chat, komentar, dan lainnya.  Aktivitas browser jadi tak terganggu, server tak terlalu terbebani, dan tentunya pengguna jadi lebih nyaman menggunakan website. 

Memangnya, AJAX itu apa sih? Terus, apa saja fungsi dan cara kerjanya sehingga website bisa lebih mudah dan nyaman digunakan. Nah, di artikel ini Kamu akan belajar lebih detail mengenai AJAX. Yuk simak selengkapnya! 

Apa itu Ajax?

“Capek euy reload halaman website mulu. Mana server kalo ditanya lama jawabnya..” protes browser.

“Salah sendiri ga minta bantuan aku..” kata AJAX 

AJAX atau Asynchronous JavaScript and XML adalah teknik yang digunakan untuk membuat website yang dinamis. Artinya website mampu mengupdate dan menampilkan data baru dari server tanpa perlu melakukan reload. Salah satu contoh penggunaannya misalnya pada update jumlah angka likes dan komentar pada media sosial Instagram, Facebook, Twitter, dan lainnya. 

Sesuai namanya, AJAX terdiri dari JavaScript dan XML yang bekerja bersama. JavaScript adalah bahasa pemrograman untuk mengelola konten website yang dinamis. Sementara XML (eXtensible Markup Language)digunakan untuk memuat dan membawa data dari server ke browser. 

AJAX JavaScript dan XML ini bekerja secara asynchronous untuk berkomunikasi dengan server. Proses pertukaran informasi ini dilakukan di background. Artinya, saat AJAX JavaScript dan XML bekerja, halaman dapat tetap diakses oleh pengunjung website. 

Bagaimana cara kerja AJAX selengkapnya? 

Cara Kerja AJAX

Kalau dijabarkan dengan contoh sebuah fitur pada website, begini cara kerja AJAX: 

  • Browser akan memanggil AJAX javascript untuk mengaktifkan XMLHttpRequest dan mengirimkan HTTP Request ke server. 
  • XMLHttpRequest dibuat untuk proses pertukaran data di server secara asinkron.
  • Server menerima, memproses, dan mengirimkan data kembali ke browser.  
  • Browser menerima data tersebut dan langsung ditampilkan di halaman website, tanpa perlu reload atau membuat halaman baru. 

Masih bingung dengan penjelasan di atas? Baiklah. Mari gunakan sebuah cerita untuk memahaminya.

Katakanlah Anda sedang berada di kedai kopi AJAX dan memesan secangkir kopi kepada kasir. Lalu, kasir mengirim pesanan ke barista untuk membuatkan kopi sesuai pesanan Anda. Setelah kopi Anda jadi, akan ada pelayan yang mengantar kopi Anda.

Ketika ada orang lain yang ingin membeli kopi, kasir bisa kembali melayani tersebut. Semua prosesnya seperti yang terjadi pada Anda.

Berbeda ketika Anda memesan kopi di kedai kopi B Aja. 

Karena hanya ada seorang pelayan yang merangkap kasir dan barista, proses pemesanan dan penyajian kopi menjadi lama. Bahkan, pengunjung lain baru bisa dilayani setelah pesanan kopi sebelumnya selesai dibuat.  

Proses pemesanan pada kedai kopi B Aja mirip dengan apa yang terjadi jika sebuah website tidak memanfaatkan AJAX

Fungsi AJAX

Apa Aja sih Kegunaan dan Fungsinya AJAX?

1. Mengirim dan Mengambil Data dari Server

AJAX dapat digunakan untuk mengirim pesan ke server lalu mengambil hasil data dari server ke browser. Prinsip yang dikerjakan pun adalah asynchronous. Jadi, selama proses mengirim pesan terjadi, browser bisa tetap terus digunakan sambil menunggu respon dari server. 

2. Mengupdate Tampilan Website tanpa harus Reload

Semua orang suka yang praktis. Nah, dengan adanya AJAX, pengunjung website bisa lebih nyaman mengakses website tanpa perlu berulang kali reload halaman. Hal ini terjadi karena AJAX hanya mengirimkan sebagian data yang dibutuhkan untuk proses saja. 

3. Membuat Website lebih cepat dan Responsif

Dengan adanya AJAX, hanya data yang diperlukan saja yang akan direquest ke server. Maka, proses di server bisa jadi lebih cepat dan data bisa langsung dikirim kembali ke browser. Imbas yang dirasakan pengunjung adalah loading website jadi lebih cepat

Jadi, pengunjung tak perlu menunggu lama ketika mengakses fitur di website seperti chat, komentar, dan lainnya. 

SUMBER:

web.dhuocreative.com
AJAX W3S

X