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:

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)
Contoh Penggunaan

$(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 mempercantik tampilan loading sebelum data ajax terload semua, saya menambahkan fungsi tertentu ketika ajax start dan ajax complete.

Untuk lebih jelasnya silakan lihat demo Demo Atau Anda bisa mendownload source code nya di sini: Download referensi: gawibowo

Comments
9 Comments

9 komentar:

Anonim mengatakan...

thanks atas infonya. sangat membantu..

erwin mengatakan...

ok. sip!

Anonim mengatakan...

wiih keren gan demonya,, izin sedot :-)

Putro mengatakan...
Komentar ini telah dihapus oleh pengarang.
erwin mengatakan...

itu di blog ente udah ada gan..

Putro mengatakan...
Komentar ini telah dihapus oleh pengarang.
erwin mengatakan...

tutorialnya udah ane meessage ke fb ente yg Unic-Zone.blogspot.com

Dunia Kita mengatakan...

mantabs tutorialnya. ane mau tanya....klo misalnya kita mau buat 4 halaman menu itu diload didalam satu halaman utama secara bersamaan mungkin ga? karena setau saya html processing dari sintak paling atas dulu kemudian sintak dibawahnya (maklum newbie jquery)...

erwin mengatakan...

@Dunia Kita:
Mungkin saja sob, tpi kaya nya url di hardcode, belum nemu yg otomatis

jadinya pas di load:
$('#container').load('content.php?id=1');
$('#container').load('content.php?id=2');
$('#container').load('content.php?id=3');
$('#container').load('content.php?id=4');

Posting Komentar