AJAX? apaan tuh?!

Sebenernya apasih AJAX ini? club sepakbola bukan sih??
Kenapa kok AJAX keren? gimana kerennya?

Okedeh daripada kamu bingung sama pertanyaan itu, aku jelasin nihh secara ringkas. jadi, AJAX (Asynchronous JavaScript And and XML) itu adalah metode untuk mengirim dan menerima data dari server tanpa harus nyegerin (refresh) halaman web. keren kan? jadi kita ga perlu nunggu si halaman itu loading, soalnya nunggu itu ga enak kan yah hehehe… Nah sekarang mari kita kenalan lebih dalam lagi yuk tentang AJAX

Gimana sih prosesnya?

AJAX ini prosesnya Asynchronous, kenapa gitu? karena secara umum jika ada request ke server, maka server bakal ngasih respon dengan meload semua data baik HTML, CSS, JS, dll. sedangkan dengan teknologi AJAX ini hanya sebagian saja yang direload, jadi tentunya bakal mempercepat kinerja karena kita hanya meload beberapa hal yang dibutuhkan saja.

Gini nih gambaran bagaimana AJAX bekerja.

Kira-kira gini nih perbandingan antara konsep konvensional dan konsep ajax

Konsep konvensional

1. Request HTTP dikirim dari client/web browser ke server
2. Server menerima request, dan kemudian mengambil data
3. Server mengirimkan data ke client/web browser
4. client/web browser menerima data dan mereload halaman supaya data bisa ditampilkan

Konsep AJAX

1. Client/web browser membuat JavaScript call yang selanjutnya bakal mengaktifkan XMLHttpRequest
2. di belakang layar, client mengirim request HTTP ke server
3. Server menerima, mengambil, dan mengirim data ke client/web browser
4. client/web browser menerima data dan pastinya langsung ditampilkan di halaman tanpa harus mereload halaman terlebih dahulu

Gimana sih cara pakai AJAX?

Pertama, kita buat dulu objek AJAX dengan mengaktifkan XMLHttpRequest

var xhr = new XMLHttpRequest()

Kedua, kita harus menentukan fungsi handler untuk event nya

xhr.onreadystatechange = function() { ... }
xhr.onload = function() { ... }
xhr.onerror = function() { ... }
xhr.onprogress = function() { ... }

Ketiga, kita tentukan Method, URL, dan pilihan apakah async atau tidak (true/false)

xhr.open('GET', url, true)

Keempat kita kirim request ke server

xhr.send()

Nah itu tahapan pembuatan AJAXnya, sekarang mari kita coba implementasiin AJAX nya

Mari kita buat file HTML dan isi code ini :

Hasilnya gini :

sebelum tombol di klik

setelah tombol di klik

Nah buat contoh diatas, kita mengambil data dari jsonplaceholder.typicode.com dengan method GET. setelah itu hasilnya langsung kita masukkan ke dalam elemen <div id=”tampil”></div>

Dan untuk menampilkan data tersebut, kita menggunakan properti onreadystatechange untuk mendefinisikan fungsi yang bakal kita dijalankan saat perubahan readystate.
Lalu bedanya onreadystatechange, readyState, dan status itu apa?

nihh simak tabelnya yaa

Nahh itulah penjelasan simplenya AJAX dan bagaimana cara kerjanya.
Semoga bermanfaat yaa!

Sumber : upwork