Penasaran dengan AJAX Event Handler ? Yuk Baca!
New Post has been published on https://loveyourcode.com/belajar-ajax-event-handle/
Penasaran dengan AJAX Event Handler ? Yuk Baca!
Ajax Event Handler adalah lanjutan dari materi AJAX sebelumnya belajar ajax lebih mendalam. konsep ajax event handler ini juga sangatlah penting untuk para programmer dalam mengimpelentasikan AJAX didalam website kamu.
Metode ini mendaftarkan penangan yang akan dipanggil bila ada kejadian tertentu, seperti inisialisasi atau penyelesaian, mengambil tempat untuk setiap permintaan AJAX pada halaman.
Berikut macam-macam AJAX Event Handler :
Metode ajaxComplete () menentukan fungsi yang akan dijalankan ketika sebuah permintaan AJAX selesai. Tidak seperti ajaxSuccess (), fungsi ditentukan dengan ajaxComplete () metode akan berjalan ketika permintaan selesai, bahkan tidak berhasil.
Syntax:
Syntax : $(selector).ajaxComplete(function(event,xhr,options))
Contoh penggunaan ajax():
Buatlah file bernama ajaxComplete.php dan tulislah syntax dibawah ini:
<!DOCTYPE html> <html> <head> <script src="js/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function() $("#txt").ajaxStart(function() $("#wait").css("display","block"); ); $("#txt").ajaxComplete(function() $("#wait").css("display","none"); ); $("button").click(function() $("#txt").load("file.php"); ); ); </script> </head> <body> <div id="txt"><h2>Latihan AjaxComplate</h2></div> <button>Klik Disini</button> <div id="wait"><img src='loading.png' width="64" height="64" /></div> </body> </html>
Selanjutnya buatlah file baru bernama file.php dan kembali ketik tulisan dibawah ini:
File Sukses ajaxComplete berhasil DiTampilkan ! Selamat! <!-- Boleh diubah sesuai data yang ingin di tampilkan -->
Penjelasan:
Ketika ketika tombol “klik disini” dijalankan ketika permintaan ajax selesai maka akan muncul seperti dibawah ini dan menggantikan kalimat “Latihan ajaxComplate “ dan gambar loading akan hilang. Seperti gambar dibawah ini:
belajar ajax complete hasil
Mendaftarkan handler yang akan dipanggil ketika Ajax permintaan lengkap dengan kesalahan.
Syntax:
$(selector).ajaxError(function(event,xhr,options,exc))
Contoh Penggunaan AjaxError : Buatlah file baru bernama ajaxError.php dan salin lah coding dibawah ini:
<!DOCTYPE html> <html> <head> <script src="js/jquery-1.11.2.min.js"></script> <script> $(document).ready(function() $("div").ajaxError(function() alert("Harap dipriksa lagi masih ada yang Erorr!"); ); $("button").click(function() $("div").load("File.php"); ); ); </script> </head> <body> <div><h2>Latihan ajax error</h2></div> <button>Klik Saya</button> </body> </html>
Penjelasan :
Ketika tombol “klik disini” dijalanan kan maka ajax akan memberi peringatan bahwa script atau code masih ada yang salah. Dapat dilihat pada AjaxError.php terdapat pemanggilan file “file.php” padahal pada kasus tersebut file.php tidak ada. Seperti gambar dibawah ini.
latihan ajax error berhasil
Metode menentukan fungsi untuk menjalankan ketika sebuah permintaan AJAX akan segera dikirim.
Syntax:
$(selector).ajaxSend(function(event,xhr,options))
Contoh penggunaan ajaxSend(). Buatlah file bernama ajaxSend.php dan tuliskan coding dibawah ini:
<!DOCTYPE html> <html> <head> <script src="js/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function() $("div").ajaxSend(function(e,xhr,opt) $(this).html("Requesting " + opt.url); ); $("button").click(function() $("div").load("file.php"); ); ); </script> </head> <body> <div><h2>Latihan AjaxSend()</h2></div> <button>Klik disini</button> </body> </html>
Selanjutnya buatlah file baru bernama file.php dan ketikan kalimat dibawah ini kedalam file tersebut:
File Sukses DiTampilkan ! ajaxSend berhasil! <!-- Boleh dirubah sesuai data yang ingin di tampilkan -->
Penjelasan:
Ketika tombol “klik disini” dijalanan kan maka sebuah permintaan ajax akan dikirim yang di ambil dari file.php kemudian test “Latihan ajaxSend” akan digantikan dengan isi yang ada di file.php. Seperti gambar dibawah ini
Gambar latihan ajax send berhasil
Metode menentukan fungsi yang akan dijalankan ketika sebuah permintaan AJAX dimulai.
Syntax:
$(selector).ajaxStart(function())
Contoh penggunaan ajaxStart() : Buatlah file baru bernama AjaxStart.php dan salinlah coding dibawah ini:
<!DOCTYPE html><html><head> <script src="js/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function() $("div").ajaxStart(function() $(this).html("<img src='loading.gif' />"); ); $("button").click(function() $("div").load("file.php"); ); ); </script> </head> <body> <div><h2>Try Ajax Start with Sirkel</h2></div> <button>Tekan Saya</button> </body></html>
Penjelasan:
Ketika tombol “klik disini” dijalanan kan, maka sebuah permintaan ajax dimulai dan akan meload file.php. Seperti gambar dibawah ini.
Gambar latihan ajax start berhasil
Metode menentukan fungsi untuk menjalankan ketika SEMUA permintaan AJAX telah selesai.
Syntax:
$(selector).ajaxStop(function())
Ketika sebuah permintaan AJAX selesai, cek jQuery jika ada lagi permintaan AJAX. Fungsi ditentukan dengan metode ajaxStop () akan dijalankan jika tidak ada permintaan lain yang tertunda. Contoh penggunaan ajaxStop() : Buatlah file bernama ajaxStop.php dan salin lah coding dibawah ini:
<!DOCTYPE html> <html> <head> <script src="js/jquery-1.11.1.min.js"></script> <script> $(document).ready(function() $("div").ajaxStop(function() alert("Request AjaxStop Berhasil"); ); $("button").click(function() $("div").load("file.txt"); ); ); </script> </head> <body> <div><h2>Latihan ajaxStop</h2></div> <button>Klik Disini</button> </body> </html>
Ketika tombol “klik disini” dijalanan kan, maka sebuah semua permintaan ajax telah selesai dan akan muncul alert seperti gambar dibawah ini :
belajar ajax stop berhasil
