AJAX (Asynchronous JavaScript And XML) adalah sebuah fungsi Javascript yang digunakan untuk melakukan permintaan data (request) ke server dan menangani response (handling response), baik response dalam bentuk XML, Javascript ataupun JSON dari sebuah Rest API.

Ajax akan mengambil dan mengirim data ke server secara asynchronous. Artinya, proses pertukaran informasi ini dilakukan di background, sehingga website mampu mengupdate dan menampilkan data baru dari server tanpa perlu melakukan reload.

Ajax juga terkadang digunakan untuk membuat aplikasi yang menginginkan data secara realtime.

Pada artikel ini, kita akan berkenalan dengan beberapa fungsi AJAX request. Yang pertama menggunakan XHR. Yang kedua, menggunakan JQuery. Dan yang ketiga menggunakan metode terbaru yang tentu paling disarankan saat ini yaitu dengan fungsi Fetch.

Namun sebelum membahas fungsi AJAX request, terlebih dulu akan dibahas mengenai cara kerja, kelebihan, dan kekurangan AJAX.

Cara Kerja AJAX

Jika diilustrasikan dengan contoh sebuah fitur pada website, begini cara kerja AJAX:
  • Browser membuat JavaScript call yang kemudian akan mengaktifkan XMLHttpRequest.
  • Di background, web browser mengirimkan permintaan (request) HTTP ke server.
  • Server menerima, mengambil, dan mengirimkan data kembali ke web browser.
  • Web browser menerima data yang diminta dan akan langsung ditampilkan di halaman tanpa harus melalui proses reload terlebih dulu.

Pada umumnya sistem ini terdiri atas:
  • HTML/XHTML – sebagai CSS dan juga bahasa utama untuk menampilkan sebuah data.
  • DOM (The Document Object Model) – untuk menampilkan sebuah data dinamis dengan interaksinya.
  • XML – untuk penukaran data, sedangkan XSLT hanya untuk manipulasi sebuah data. Sebagian dari developer akan mengganti XML pada JSON, ini karena bentuknya mendeteksi JavaScript.
  • XMLHttpRequest – untuk berkomunikasi secara tidak langsung atau asynschronous.
  • Bahasa pemrograman JavaScript - untuk menyatukan semua teknologi ini.

Kegunaan AJAX

Berikut adalah kegunaan ajax untuk website:

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. Validasi Data yang Real Time

AJAX dapat melakukan proses validasi secara langsung tanpa melalui proses refresh pada saat user melakukan pengisian data melalui form.

4. 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.

5. Autocomplete

AJAX dapat digunakan untuk melakukan autocomplete pada saat user sedang mengisi data pada sebuah form, dengan demikian karakter yang sedang dituliskan oleh user akan bisa langsung dilengkapi oleh entry-entry atau masukan yang disarankan.

Contoh pada saat kita melakukan pencarian di google, lalu kita mengetikkan kalimat atau kata yang belum utuh, maka secara otomatis akan tersedia daftar entry atau masukan yang berkaitan dengan kalimat atau kata tersebut, sehingga kita tidak perlu repot mengetik kata atau kalimat secara lengkap.

Kelebihan Menggunakan Ajax

Beberapa kelebihan menggunakan ajax sebagai berikut:

1. Untuk Meningkatkan User Experience (UX)

Manfaat paling penting saat menggunakan teknologi Ajax pada halaman web adalah dapat meningkatkan pengalaman pengguna / UX.

Situs web menjadi lebih menarik, dan terasa lebih cepat karena tidak perlu berganti halaman ketika melakukan suatu tindakan. 

Ajax meningkatkan kinerja browser dan memfasilitasi kecepatan penelusuran yang lebih tinggi untuk memberikan pengalaman pengguna yang responsif.

2. Navigasi yang Lebih Mudah

Aplikasi Ajax dapat dibangun untuk memungkinkan transisi yang mudah antara halaman web ke pengguna daripada menggunakan tombol “back” & “next” konvensional di browser.

3. Meningkatkan Kompatibilitas

Ajax dapat kompatibel dengan ASP.NET, J2EE, PHP dan bahasa lainnya. Hampir semua browser populer mendukung AJAX, seperti Internet Explorer mulai dari versi 5, Mozilla Firefox mulai dari versi 1.0.

4. Mendukung Proses Asynchronous 

Pengambilan data Asynchronous dapat dilakukan dengan menggunakan XMLHttpRequest yang merupakan bagian terpenting dari teknologi Ajax. Oleh karena itu, permintaan ditangani secara efektif dan konten konten dinamis ditampilkan dengan peningkatan kinerja yang jauh lebih tinggi.

Kekurangan Menggunakan Ajax

Beberapa kekurangan menggunakan ajax sebagai berikut:

1. Kompatibilitas Browser

Ajax sangat tergantung pada Javascript yang diimplementasikan secara berbeda untuk berbagai browser. Ini ternyata menjadi rintangan terutama ketika Ajax digunakan di banyak browser.

Browser yang tidak mendukung Javascript atau browser yang Javascriptnya dinonaktifkan  tidak akan dapat menggunakan aplikasi yang telah dibuat.

2. Tidak Bagus untuk SEO

Karena konten dihasilkan menggunakan Javascript, mesin pencari seperti Google akan mengalami kesulitan mengindeksnya, sehingga mengurangi efektivitas jika dilihat dari sisi SEO kurang friendly.

Fungsi AJAX Request

Dibahas lanjut nanti.

Referensi:

https://www.hostinger.co.id/tutorial/apa-itu-ajax
https://www.niagahoster.co.id/blog/ajax-javascript/
https://www.matawebsite.com/blog/mengenal-konsep-ajax-pada-javascript
https://www.dicoding.com/blog/mengenal-fungsi-asynchronous-request-pada-javascript/