Apa itu AJAX?
Asynchronous JavaScript and XML atau disingkat AJAX adalah teknologi yang memungkinkan web app berinteraksi dengan server secara asinkron. Artinya, aplikasi dapat mengirim dan menerima data di background tanpa perlu me-refresh seluruh halaman.
AJAX bekerja menggunakan JavaScript dan XML untuk menjalankan panggilan asinkron saat browser dan server bertukar data. Dalam model konvensional, browser mengirim permintaan HTTP ke server, lalu server mengirim kembali data yang diminta, menyebabkan browser me-refresh seluruh halaman. Namun, dengan AJAX, browser hanya memperbarui bagian tertentu dari konten web berdasarkan data yang diminta.
Kegunaan AJAX
Kegunaan utama AJAX adalah untuk meningkatkan interaktivitas, kecepatan, dan responsivitas web app dengan cara melakukan pertukaran data dengan server secara asinkron.
Lebih lanjut, Amazon web Service menjabarkan kegunaan AJAX:
Autocomplete
Salah satu fungsi AJAX yang paling umum adalah dalam fitur autocomplete pada search engine. Saat user mengetik di search bar, AJAX mengirimkan setiap karakter yang diketik ke server dan menerima kembali saran pencarian yang relevan tanpa perlu me-refresh halaman. Dengan begitu, user mendapatkan feedback secara cepat dan efisien.
Verifikasi form
AJAX juga dipakai dalam verifikasi form pada web app.
Sebagai contoh, ketika user membuat akun baru, AJAX membuat halaman web memverifikasi ketersediaan nama user secara otomatis sebelum user melanjutkan ke bagian berikutnya. Hal ini meningkatkan user experience dengan memberikan feedback langsung dan mengurangi kesalahan.
Fungsionalitas chat
Dalam aplikasi messenger teks dan chatbot, AJAX dimanfaatkan untuk menampilkan percakapan secara real-time di browser. AJAX mengirimkan teks yang ditulis user ke server dan menampilkannya secara simultan di interface chat user lainnya.
Media sosial
Platform media sosial menggunakan AJAX untuk memperbarui feed user dengan konten terbaru tanpa perlu memuat ulang halaman browser. Contohnya, Twitter menggunakan AJAX untuk me-refresh feed secara otomatis ketika seseorang yang di-follow user memposting pembaruan.
Sistem voting dan penilaian
Beberapa forum online menggunakan AJAX untuk menampilkan penilaian atau voting dari postingan tertentu secara real-time. Misalnya, user dapat memberikan upvote atau downvote pada postingan di Reddit tanpa perlu memuat ulang seluruh halaman.
Cara Kerja AJAX
Tutorials Point dan Amazon Web Service menjabarkan cara kerja AJAX:
- Inisiasi permintaan oleh browser: proses AJAX dimulai ketika sebuah event terjadi di halaman web, seperti klik tombol atau pengiriman form. JavaScript (yang terintegrasi dalam halaman web) mendeteksi event ini lalu membuat objek XMLHttpRequest.
- Pengiriman permintaan ke server: objek XMLHttpRequest kemudian digunakan untuk mengirim permintaan ke web server. Permintaan ini bisa berisi data yang perlu diproses atau permintaan untuk mengambil data. Data dapat dikirim dalam berbagai format, termasuk teks biasa, XML, atau JSON.
- Pemrosesan permintaan oleh server: setelah server menerima permintaan dari browser, server memproses permintaan tersebut. Proses ini kemungkinan melibatkan interaksi dengan database atau operasi lain di server.
- Pengiriman respons oleh server: setelah memproses permintaan, server mengirimkan respons kembali ke browser. Respons juga bisa dalam berbagai format, seperti XML, JSON, atau teks biasa.
- Pemrosesan respons oleh JavaScript: jika browser sudah menerima respons dari server, JavaScript memproses respons tersebut. Proses ini bisa melibatkan pembaruan DOM untuk merefleksikan perubahan pada halaman web, seperti menampilkan data baru atau memperbarui elemen yang ada.
- Pembaruan halaman web: akhirnya, halaman web diperbarui dengan data atau perubahan yang diterima dari server. Hal ini dilakukan tanpa harus memuat ulang seluruh halaman, sehingga user dapat melanjutkan interaksi dengan halaman tanpa gangguan.
Contoh Penggunaan AJAX
Berikut beberapa contoh umum penggunaan AJAX:
Autocomplete di kotak pencarian
Salah satu contoh paling terkenal dari penggunaan AJAX adalah fitur autocomplete di kotak pencarian Google. Saat user mulai mengetik, AJAX mengirimkan karakter yang dimasukkan ke server, kemudian mengembalikan daftar saran pencarian secara real-time tanpa perlu memuat ulang halaman.
Pembaruan data tanpa refresh
Dalam aplikasi seperti dashboard analitik atau scoreboard olahraga, AJAX digunakan untuk memperbarui data secara berkala dan user tidak perlu me-refresh halaman, sehingga data yang ditampilkan selalu up to date.
Pencarian dan filter produk
Dalam e-commerce, AJAX dimanfaatkan untuk pencarian produk dan filter. User dapat memasukkan kriteria pencarian atau memilih filter, hasilnya akan diperbarui secara dinamis tanpa memuat ulang halaman.
FAQ (Frequently Ask Question)
Apa saja teknologi yang digunakan AJAX?
Berikut teknologi utama yang digunakan dalam AJAX dirangkum dari Tutorials Point dan Amazon Web Service:
JavaScript
JavaScript adalah bahasa pemrograman untuk membuat fungsionalitas di client-side dalam web app. Dalam konteks AJAX, JavaScript digunakan untuk membuat panggilan asinkron ke server dan memanipulasi DOM berdasarkan respons yang diterima.
XML (eXtensible Markup Language)
Meskipun nama AJAX mencakup XML, teknologi ini tidak selalu digunakan. XML adalah format data yang dipakai untuk pertukaran dan penyimpanan data terstruktur. Dalam AJAX, XML berfungsi untuk mengirim dan menerima data dari server, meskipun format lain seperti JSON juga sering diterapkan.
XMLHttpRequest
XMLHttpRequest adalah objek inti dalam AJAX yang memungkinkan komunikasi asinkron dengan server. Objek ini berguna untuk mengirim permintaan ke server dan menerima respons tanpa memuat ulang halaman.
HTML dan CSS
HTML dipakai untuk struktur konten halaman web, sedangkan CSS digunakan untuk styling. Dalam AJAX, HTML dan CSS berfungsi untuk menampilkan dan memformat konten yang diperbarui atau dimodifikasi sebagai hasil dari permintaan AJAX.
DOM (Document Object Model)
DOM memungkinkan JavaScript mengakses dan memanipulasi elemen halaman web. Dalam AJAX, DOM dimanfaatkan untuk memperbarui konten halaman secara dinamis berdasarkan data yang diterima dari server.
JSON (JavaScript Object Notation)
JSON (yang sering digunakan sebagai alternatif untuk XML) adalah format ringan untuk pertukaran data. JSON mudah dibaca dan ditulis oleh manusia sekaligus mudah diurai oleh mesin, menjadikannya pilihan populer untuk pertukaran data dalam aplikasi AJAX.
