9 Ajax Sederhana Menggunakan JQuery
AJAX adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dipanggil ulang hanya untuk mengganti sebagian kecil dari isi halaman.
Dengan framework jQuery, proses development ajax bisa menjadi lebih mudah.
Salah satu fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), yang memiliki 3 buah parameter sbb:
Untuk lebih jelasnya silakan lihat demo Demo Atau Anda bisa mendownload source code nya di sini: Download referensi: gawibowo
load(url, params, callback)
- keterangan:
- url (String): URL dari file html yang akan di load
- params (Object): Data yang akan dikirimkan ke server (optional)
- callback (Function): Fungsi yang akan dijalankan ketika data berhasil di load (optional)
$(function(){
$("#menu a").click(function() {
url = $(this).attr("href");
$("#container").load(url);
return false;
});
$(document).ajaxStart(function(){
$("#loading").fadeIn();
$("#container").fadeIn(function(){
$(this).css({"opacity":"0.1"});
});
});
$(document).ajaxComplete(function(){
$("#loading").hide();
$("#container").css({"opacity":"1"});
});
});
- keterangan:
- #menu a, adalah link berupa elemen a didalam id menu yang akan di klik
- url = $(this).attr('href'); adalah isi variabel url yang merupakan isi dari atribut link berupa href
- $('#container').load(url); adalah funsi untuk menampilkan content dari url yang di klik ke elemen ber-id container
Untuk lebih jelasnya silakan lihat demo Demo Atau Anda bisa mendownload source code nya di sini: Download referensi: gawibowo
