Seperti yang kita ketahui Ajax adalah sebuah api dimana kita bisa menyambungkan sebuah kode javascript kita ke webservice atau bahasa pemrograman lain, seperti pertukaran data, mungkin cara ajax dengan menggunakan javascript itu memang lebih rumit di bandingkan kita menggunakan ajax jQuery, tidak apa-apa alangkah baiknya kita juga bisa mengenal ajax javascript ini, oke seperti apa cara menggunakan ajax dengan javascript, simak terus ya.

Seperti yang saya tulis diatas, untuk cara menggunakan ajax dengan javascript kita akan coba membuat sebuah ajax menggunakan javascript, menggunakan ajax javasript kita tidak hanya bisa mengambil data dari JSON saja tetapi kita juga bisa mengambil data bertype php, txt dll. Langkah pertama yang teman-teman harus lakukan adalah memanggil request ajax yaitu dengan XMLHttpRequest() seperti ini

Fungsi di atas adalah langkah pertama untuk menggunakan ajax javascriptnya, dimana saya membuat sebuah variabel ajax ya, supaya variabel itu akan kita panggil lagi di bawahnya selanjutnya kita buka file yang akan kita ambil datanya dengan cara:

kita open disini saya mengguakan method ‘GET’  lalu ‘data.json’ itu adalah nama file yang akan kita sambungkan dimana di data.json ini saya sudah mengisi datanya seperti ini

yang terakhir true, true disini berarti asynchronous, yang berarti saya tidak mau di sinkronkan langsung, setalah itu kita buat onreadystatechange untuk mengatur status proses ajax kita apakah berhasil atau tidak caranya seperti ini:

setelah kita buat ajax.onreadystatechange nya, disini saya membuat sebuah kondisi dimana readyState nya itu harus 4 dan statusnya harus 200, apakah itu dari mana data itu, itu adalah hasil respone dari XMLHttpRequestnya, teman-teman bisa lihat disini

cara menggunakan ajax dengan javascript

Jika kondisi semua sudah benar maka JSON nya saya parse terlebih dahulu dengan parameter this.responseText karena disitu kita ingin mengambil textnya, jika sudah saya akan menampilkan datanya kedalam id result yang ada di atas dengan nama yang ingin kita panggil dan jangan lupa ajax.send() nya.

Oke saya rasa cukup jelas, dan saya kira cukup sampai disini belajar kita tentang cara menggunakan ajax dengan javascript semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

 

 

WhatsApp chat