AJAX - Mengakses Data TANPA Harus Refresh Halaman Website

Ahoy Plimbers...

Javacript merupakan salah satu teknologi atau bahasa pemrograman yang banyak sekali digunakan pada tahun 2019 (data bisa dilihat pada artikel sebelumnya yang berjudul Teknologi Terpopuler 2019 Berdasarkan Survey)

Salah satu teknik dalam pengembangan website yang ditawarkan oleh Javascript adalah AJAX.

AJAX singkatan dari Asynchronous Javascript And XML berfungsi untuk mempersingkat atau mempermudah penggunanya (user experience).

Mempermudah gimana?

Maksudnya, dengan menggunakan AJAX, para user bisa mengakses konten yang ada pada suatu website dengan cepat tanpa harus melakukan refresh pada browser.

 

Berbanding lurus dengan fitur yang ditawarkan dari teknologi AJAX ini antara lain:

1. Mengambil data dari server diakses di backgroud (latar belakang)

2. Update tampilan website tanpa harus melakukan reload atau refresh browser

3. Mengirim data ke server secara background

 

Sesuai dengan namanya AJAX ini mendukung data dalam format XML, namun tidak hanya itu, AJAX juga mendukung format JSON (JavaScript Object Notation) , Plain Text, dan HTML (Hypertext Markup Language)

 

Contoh sebuah website yang mengimplementasikan AJAX adalah Google.

 

Dari gambar di atas, ketika kamu mengetikan sesuatu di kolom pencarian Google maka langsung akan mendapatkan suggestion atau saran yang dimana data tersebut diambil secara background dan tanpa harus me-reload browser.

 

Setiap teknik pengembangan memiliki cara kerjanya masing masing, AJAX memiliki cara kerja dimana,

1. Browser membuat Javascript Call yang kemudian akan mengaktifkan object bernama XMLHttpRequest

2. Di backgorund, web browser mengirimkan request atau permintaan HTTP ke server

3. Kemudian server menerima dan mengambil request tersebut yang kemudian mengirimkan kembali (response) data ke web browser

4. Web browser menerima data yang diminta dan langsung ditampilkan di halaman tanpa harus melalui proses reload

 

Kemudian bagaimana cara menggunakan AJAX?

Pertama membuat Object AJAX dengan mengetikan baris kode berikut,

Kedua, tentukan fungsi handler yang akan kamu gunakan, misalkan kita menggunakan fungsi onreadystatechange, seperti berikut ini,

Catatan:

Ada beberapa fungsi di AJAX, antara lain:

1. onreadystatechange yang dimana digunakan ketika ada readyState dan status yang berubah.

Ada 5 tipe readyState yang akan berubah, yaitu angka 0 sampai 4.

Angka 0 berarti request belum dibuat

Angka 1 berarti terjadi masalah pada koneksi server

Angka 2 berarti request diterima server

Angka 3 berarti request sedang diproses server

Angka 4 berarti request selesai dan response siap dikirimkan

Macam macam status kode, antara lain:

200 berarti sukses,

403 berarti forbidden atau terlarang,

404 berarti halaman tidak ditemukan, dll

 

2. onload terjadi ketika objek XMLHttpRequest telah selesai dan berhasil diakses

3. onerror terjadi ketika mengakses XMLHttpRequest dan terjadi error atau kesalahan

4. onprogress dipanggil secara periodik yang mengirimkan informasi sebelum object XMLHttpRequest berhasil di request

 

Ketiga, menentukan method dan url yang akan diakses,

 

Keempat, mengirimkan request ke server,

 

Kemudian kita coba dengan membuat file HTML dengan isi seperti ini,

Kode di atas akan mengakses atau me-request data dari Petani Kode, dengan hasil berikut ini,

Dan jika tombol “Load Content” ditekan maka akan muncul data yang telah diminta dari server Petani Kode dan tanpa harus me-reload atau me-refresh halaman web tersebut seperti berikut ini,

 

Dan selesai sudah pembahasan artikel pada kali ini, kita telah mempelajari AJAX yang diterapkan pada website kamu sehingga mengakses data dari server tanpa harus melakukan refresh pada browser kamu.

 

Salam dari Bandung