Tutorial


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, apa sih AJAX itu? Terus, apa saja fungsi dan cara kerjanya sehingga website bisa lebih mudah dan nyaman digunakan. Nah, di artikel ini Anda 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. 

contoh AJAX Javascript pada twitter

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. 

Baca juga:   Aldwin Nayoan, Author at Niagahoster Blog

Bagaimana cara kerja AJAX selengkapnya? 

Baca juga: Panduan Belajar HTML untuk Pemula 

Cara Kerja AJAX 

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

  1. Browser akan memanggil AJAX javascript untuk mengaktifkan XMLHttpRequest dan mengirimkan HTTP Request ke server. 
  2. XMLHttpRequest dibuat untuk proses pertukaran data di server secara asinkron.
  3. Server menerima, memproses, dan mengirimkan data kembali ke browser.  
  4. 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 saja fungsi AJAX untuk website? Ini beberapa fungsinya: 

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. 

Baca juga:   Ayo Backup Data Website! Ini 7 Resiko yang Bisa Anda Hindari

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. 

1. Chat

Seberapa sering Anda mengunjungi sebuah website dan menemukan fitur live chat di sana? Cukup sering, kan? 

Contoh AJAX pada chat website

Dengan adanya fitur chat, semakin mudah bagi pengunjung untuk berkomunikasi dengan pemilik website. 

Namun, coba bayangkan jika halaman website harus reload setiap pengunjung klik tombol kirim untuk chat. Bukannya membantu, fitur itu justru akan membuat pengunjung kesal, kan? 

Nah, dengan adanya AJAX, fitur chat di website bisa terus digunakan dengan nyaman. Apalagi, kalau performa website optimal. Proses chat bisa jadi lebih cepat. 

2. Voting dan Rating

Anda yang aktif di media sosial atau belanja online pasti sudah tak asing lagi dengan fitur voting Twitter atau rating di Google Bisnisku, bukan?

Baca juga:   Panduan Lengkap Desain Web dengan Mudah Bagi Pemula

Nah, fitur tersebut dibuat menggunakan AJAX. Setelah Anda klik tombol like atau kirim rating, website akan langsung mengupdate jumlahnya tanpa reload atau mengubah tampilan halaman.

Rating Niagahoster

Sama halnya saat Anda mengisi kolom komentar pada postingan. Setelah mengirimkan komentar, website akan segera update hasilnya. 

3. Google Search Suggestion 

Kurang afdol rasanya kalau tidak memasukkan Google Search Suggestion sebagai contoh AJAX dalam website. Kenyataannya, popularitasnya semakin meningkat saat Google menggunakannya. 

Contoh penggunaan AJAX Javascript pada Google Suggestion

Ketika Anda mengetikkan keyword di Google Search, Anda cukup mengetikkan beberapa kata saja. Nantinya, Google Search Suggestion akan memberikan rekomendasi terbaik secara cepat. Anda tak perlu menunggu lama dan berpindah halaman. 

Pastikan AJAX Menjadi Bagian Website Anda! 

Nah, itu tadi penjelasan lengkap mengenai AJAX. Anda sudah mempelajari pengertian dan cara kerja hingga fungsinya pada website. 

Dengan menggunakan AJAX, Anda dapat membuat website dengan user experience yang baik. Selain website jadi lebih cepat, pengunjung juga akan senang karena tak perlu sering reload untuk mengakses fitur di website. 

Beberapa fitur website yang menggunakan AJAX antara lain: live chat, sistem voting dan rating, notifikasi, dan masih banyak lagi termasuk Google Search Suggestion. 

Dengan semua manfaat yang ditawarkan, yakin tidak ingin menggunakan AJAX untuk di website Anda? 



Source link

Hosting Unlimited Indonesia

Author

admin

Leave a comment

Your email address will not be published.

%d bloggers like this: