AJAX: Pengertian, Fungsi, Cara Kerja, dan Contoh Penggunaannya
 |
| AJaX (Asynchronous JavaScript and XMLHTTP) |
Pengertian AJAX
AJaX (Asynchronous JavaScript and XMLHTTP) adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. AJAX digunakan untuk membuat website yang dinamis yaitu website mampu mengupdate dan menampilkan data baru dari server tanpa perlu melakukan reload.
Baca Juga: Dynamic Website: Pengertian, Tujuan, Cara Kerja, Jenis, Manfaat, Contoh, dan Perbedaannya dengan Static Website
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.
Salah satu contoh penggunaannya misalnya pada update jumlah angka likes dan komentar pada media sosial Instagram, Facebook, Twitter, dan lainnya.
Fungsi AJAX
Beberapa fungsi AJAX di antaranya,
1. Mengirim dan Mengambil Data dari Server
Pertama, fungsi AJAX adalah untuk mengirim pesan dan mengambil data dari server. Hal ini dilakukan secara asynchronous. Artinya, browser tetap bisa digunakan selama proses pengiriman pesan terjadi dan menunggu respons dari server.
2. Mengupdate Tampilan Website Tanpa Harus Reload
Selanjutnya, fungsi dari AJAX adalah bisa mengupdate tampilan website tanpa harus melakukan reload. AJAX melakukan pengiriman data yang dibutuhkan guna proses saja. Hal ini menjadi keuntungan tersendiri karena pengunjung bisa lebih nyaman dalam mengakses website tanpa harus melakukan reload berkali-kali.
3. Membuat Website Lebih Cepat dan Responsif
Terakhir, fungsi dari AJAX adalah membuat website lebih cepat dan juga responsif. AJAX memungkinkan untuk merequest data penting saja langsung ke server, sehingga proses di server menjadi lebih cepat dan pengunjung dapat merasakan loading website yang lebih mudah dan cepat.
Cara Kerja AJAX
Sistem umum dari cara kerja AJAX di antaranya,
1. HTML / XHTML untuk bahasa utama dan CSS untuk presentasi.
2. Document Object Model (DOM) untuk data tampilan dinamis dan interaksinya.
3. XML untuk pertukaran data dan XSLT untuk manipulasinya. Banyak pengembang sudah mulai mengganti dengan JSON karena lebih dekat ke JavaScript.
4. Objek XMLHttpRequest untuk digunakan sebagai komunikasi yang tidak sinkron.
Contoh Penggunaan AJAX
Misalnya penggunaan fitur Google Autocomplete, di mana ketika Anda sedang mengetik kata kunci di Google, fitur ini akan menyelesaikannya untuk Anda. Meskipun keywordnya berubah-ubah secara real time, tampilan halamannya tetap sama.
Pada awal tahun 90-an, di mana internet belum secanggih dan semasif sekarang, fitur tersebut mengharuskan Google untuk memuat halaman setiap kali rekomendasi kata kunci baru muncul di layar. Saat ini, dengan adanya AJAX, pertukaran data dan layar yang menampilkan data akan bekerja secara bersamaan tanpa mengintervensi atau mengganggu fungsi masing-masing.
Sebenarnya, konsep AJAX sudah ada sekitar pertengahan tahun 90an. Hanya saja, versi tersebut belum dikenal seperti sekarang. Popularitasnya baru menanjak ketika Google menerapkan konsep tersebut pada Google Mail dan Google Maps di tahun 2004. Sampai saat ini, AJAX telah digunakan di berbagai aplikasi web untuk mempersingkat proses komunikasi server.
Berikut beberapa contoh penggunaan AJAX di kehidupan sehari-hari di antaranya,
1. Sistem voting dan rating
Bagi yang sering berbelanja online, pasti kerap diminta untuk memberikan rating bintang, atau mungkin juga pernah mengisi formulir voting online. Biasanya kedua sistem ini menggunakan AJAX. Setelah klik opsi rating atau voting, website akan memperbarui kalkulasi tapi tampilan halaman tetap sama, tidak ada yang diubah atau harus direload.
2. Chat room
Sebagian website ada yang mengaktifkan chat room bawaan di halaman utamanya. Chat room ini menjadi media bagi Anda untuk berkomunikasi dengan tim customer support. Anda tidak perlu khawatir fitur ini akan tertutup bilamana ingin membuka halaman lain dari website tersebut. AJAX tidak akan mereload halaman setiap kali Anda mengirimkan dan menerima pesan chat baru.
3. Notifikasi trending di Twitter
Twitter menggunakan AJAX untuk mengumumkan informasi atau notifikasi terbaru. Setiap kali ada tweet baru mengenai topik yang sedang trending, Twitter akan memperbarui notifikasi tanpa mengganggu fungsi halaman utama.
Dalam bahasa yang sederhana, AJAX memudahkan pekerjaan yang multitasking. Ketika ingin mengisi formulir voting online, misalnya, dan hanya fitur tersebut saja yang berubah tapi tidak dengan halamannya, maka website tersebut menerapkan konsep AJAX.
Dari berbagai sumber
Post a Comment