Belajar Cara Menggunakan Ajax pada Javascript

 

Apa itu Ajax ?

mungkin dari teman-teman pernah membuka sebuah website dan jika teman-teman ingin menginputkan data atau ingin menampilkan data pastinya halaman web tersebut akan reload terlebih dahulu, ini dikarenaakan program akan meminta request kepada server dan mengembalikan request tersebut kepada client, 

nahh coba teman-teman bayangkan bahwa ketika ada suatu moment teman-teman ingin menampilkan data di halaman web tersebut tanpa mereload halaman webnya, nah disini lah fungsi ajax di perlukan, dari penjelasan tersebut pastinya teman-teman sudah punya bayangan apa itu ajax

ya secara umum ajax adalah singkatan dari Asynchronous Javascript And XML yang berfungsi untuk memberikan request kepada server tanpa mereload halaman web, yang dimana artinya Ajax ini berjalan di sisi background halaman web tersebut

akan tetapi yang perlu teman-teman perhatikan ialah walaupun dari singkatan ajax tertera XML bukan berarti ajax hanya dapat mengirimkan data berupa XML saja, melainkan juga dapat mengirimkan data berupa JSON, PLAIN TEXT, dan Html

Cara membuat ajax pada javascript

Pada dasarnya untuk membuat sebuah ajax pada javascript hanya menggunakan ke empat source code berikut :

langkah 1 

Gunakan Object Ajax pada javascript

    var XHR = new XMLHttpRequest();

    

 

Langkah 2

Gunakan function Handler untuk event

XHR.onreadystatechange = function(){

//pastikan state = 4, dan status = 200

if(XHR.readyState == 4 && XHR.status == 200){

//tampilkan ajaxnya

ajax.innerHTML = XHR.responseText;

}

}

 

//keterangan :

XHR.readyState => berfungsi untuk memastikan state ajax apakah sudah siap 

XHR.status => untuk mengecek apakah status ajax sudah sudah berhasil 

 

Langkah 3

Menentukan method dan url

//masukkan method ajaxnya

XHR.open("GET",url,true);

 

Langkah 4

Kirimkan Ajaxnya

//Kirim ajaxnya

XHR.send();

Selanjutnya anda bisa menjalankan programnya dengan mendwonload source codenya DISINI