AJAX jQuery · Memuat Beberapa Bagian Halaman Sekaligus dalam Satu Kali Permintaan

Tabel Konten
  1. Lebih Efisien: Gunakan $.get() 
  2. Demo? 
  3. Catatan dan Tambahan 

Ini adalah metode dasar yang sering Anda gunakan untuk memuat sebagian halaman ke dalam kontainer yang sudah dipersiapkan menggunakan AJAX. Di sini Saya menggambarkan Anda akan memuat elemen #content dari halaman /p/sample-page.html ke dalam elemen #container:

$('button').on("click", function() {
    $('#container').load('/p/sample-page.html #content');
});

Setelah tombol diklik, maka elemen #content dari halaman /p/sample-page.html akan termuat di dalam elemen #container. Ini adalah kasus yang sederhana. Namun kasus ini akan menjadi lebih rumit ketika Anda ingin memuat beberapa bagian dari halaman lain secara bersamaan dalam satu kali permintaan. Sebagai contoh, Anda ingin memuat bagian posting, navigasi halaman dan komentar secara bersamaan dalam satu kali permintaan HTTP ke dalam beberapa kontainer yang sudah dipersiapkan. Berikut ini adalah cara yang tidak efisien:

$('button').on("click", function() {
    $('#container-1').load('http://blog.my_site.com/p/sample-page.html .post');
    $('#container-2').load('http://blog.my_site.com/p/sample-page.html #nav');
    $('#container-3').load('http://blog.my_site.com/p/sample-page.html #comments');
});

Lebih Efisien: Gunakan $.get() 

Jangan memakai jQuery .load() untuk memuat beberapa bagian halaman sekaligus. Tapi gunakan jQuery $.get():

$('button').on("click", function() {
    $.get('http://blog.my_site.com/p/sample-page.html', function(data) {
        $('#container-1').html($(data).find('.post'));
        $('#container-2').html($(data).find('#nav'));
        $('#container-3').html($(data).find('#comments'));
    });
});

Pada metode ini, Anda mengeklik sebuah tombol. Kemudian permintaan akan terjadi. Setelah proses permintaan berhasil dilakukan dan halaman yang diminta berhasil dipanggil, maka halaman tersebut tidak akan langsung dimuat ke dalam area/kontainer yang sudah dipersiapkan, melainkan masih berada di dalam parameter data.

Pada kasus ini, parameter data bisa disamakan sebagai keseluruhan HTML dari halaman http://blog.my_site.com/p/sample-page.html.

Dari parameter tersebut Anda bisa menelusuri bagian-bagian halaman lainnya dengan cara menyeleksi elemen yang diinginkan di dalam $(data) untuk kemudian bisa dimuat ke dalam kontainer yang diinginkan melalui jQuery manipulasi DOM seperti .html(), .text(), .append() dan .prepend() atau yang lainnya.

Demo? 

Jika Anda sedang menggunakan peramban Firefox, klik pada menu drop-down di pojok kiri atas. Pilih menu Web Developer kemudian klik sub menu Scratchpad (Atau cukup tekan tombol Shift+F4). Salin kode di bawah ini kemudian tempelkan di dalam editor Scratchpad:

$('a').click(function() {
    $.get(this.href, function(data) {
        $('.post').html($(data).find('.post').html());
        $('#blog-pager').html($(data).find('#blog-pager').html());
        $('#comments').html($(data).find('#comments').html());
    }, 'html');
    return false;
});

Klik menu Execute dan pilih Run:

Firefox ScratchPad

Setelah kode ditempelkan, pilih menu Execute kemudian klik Run.

Sekarang klik salah satu tautan pada daftar entri/posting populer di sidebar blog ini dan tunggu beberapa saat sampai bagian dari halaman tersebut termuat. Jika berhasil, maka bagian yang akan berganti isinya adalah ada pada posting, navigasi halaman blog dan isi komentar (isi posting akan berubah, tautan navigasi halaman akan berubah dan isi komentar juga akan berubah).

Catatan dan Tambahan 

jQuery .load() bisa menerima beberapa selektor sekaligus, jika Anda tidak tahu:

// Memuat `#sidebar`, `#comments` dan `#blog-pager`
// dari `http://abc_site.com/sample-page.html` ke dalam `#container`
$('#container').load('http://abc_site.com/sample-page.html #comments,#sidebar,#blog-pager');

Jika proses pemuatan menggunakan $.get() gagal (yang Saya alami adalah muncul pesan error TypeError: n.innerHTML is undefined), cobalah untuk menggunakan pola ini:

$.get('http://abc_site.com/sample-page.html', {}, function(data) {
    // Lakukan sesuatu dengan `$(data)`
}, 'html');

17 Komentar

  • Unknown

    Ada masalah lain gak sih dalam hal ini selain masalah pemuatan gagal..?

    • Taufik Nurrohman

      Masalah umum:
      1. Tombol Back dan Forward
      2. Inline JavaScript

      1. Contoh yang Saya jelaskan/tuliskan di atas cuma menunjukkan tentang cara memuat halaman lain ke dalam halaman yang sedang aktif tanpa melakukan proses pemuatan halaman baru. Tapi masalahnya, saat bagian halaman sudah termuat, kita tidak bisa kembali lagi ke tepat awal meski dengan menekan tombol Back atau Forward. Solusinya bisa memakai plugin JQuery BBQ. Tapi untuk tahap awal, sepertinya lebih baik jangan dijelaskan dulu. Saya juga belum begitu paham. Hehe...

      2. JavaScript yang dituliskan secara langsung di dalam halaman yang dipanggil biasanya akan membuat error, sama halnya saat kita mencoba menuliskan tag <script> di dalam JavaScript seperti ini:

      <script>
      document.write('<script>alert(\'Tidak akan berhasil!\');</script>');
      </script>

      Setahu Saya masalahnya kebanyakan ada di sekitar itu.

      • Beben Koben

        ya ya sekitar itu tuh :D

      • Unknown

        kira2 ada solusi untuk masalah No 2??

        • Taufik Nurrohman

          Blogspot masih tergantung dengan JavaScript, bahkan untuk formulir komentarnya. Solusinya cuma memakai JSON, bukan memakai HTML blog secara langsung. Meskipun pada contoh di atas Saya berhasil menerapkannya, tapi terkadang hasilnya tidak stabil. Saya tidak bisa menjamin. Masih mencari tahu cara yang paling sederhana.

          Kalau mau membuat web dari awal (bukan memakai blogspot, yang —notabene— tidak open source), lebih baik mulai pelajari sudut pandang Hijack terlebih dahulu agar AJAX bisa bekerja dengan mulus:

          Begin by creating a website using traditional page refreshes.

          Intinya, buat web biasa/tradisional yang bisa bekerja secara normal tanpa JavaScript terlebih dahulu. (Klik link, halaman berganti. Klik link, halaman berganti). Setelah semuanya lancar, barulah AJAX bisa mulai diaplikasikan pada web tersebut.

          Ngomong-ngomong, sudah ada blogger yang membuat plugin AJAX untuk blogspot. Instalasinya juga mudah. Tapi mungkin tidak akan bisa bekerja dengan JQuery versi terbaru saat ini. Coba pakai versi 1.7 yang masih mendukung $.browserThe Wook Book - jQuery Ajaxify Plugin · GitHub

          • Unknown

            Wah terima kasih infonya referensinya mas..
            sukses selalu mas..

  • Unknown

    Saya lihat cara seperti ini jugu digunakan pada infinity scrolling..
    dan ada juga yang menggunakan $.ajax () untuk memuat halamannya..
    dan hasilnya hampir sama..

    • Taufik Nurrohman

      $.get() dan $.getJSON() itu sebenarnya cuma fungsi jalan pintas untuk $.ajax(), dengan tipe data yang sudah ditentukan. Jadi semuanya sama saja.

      • Unknown

        oh klo sudah menentukan format data yang mau diambil tinggal gunakan $.get() atau $.getJSON().
        untuk format data html $.get()
        sedangkan JSON/xml $.getJSON()

  • Anonim

    kenapa gak langsung elemen #out-shadow nya aja mas misalya di blog mas.biar langsung semua gitu?

    • Taufik Nurrohman

      Kenapa harus dimuat semua kalau yang diperlukan cuma sebagian?

      • Anonim

        biar simple aja mas haha

  • Unknown

    Mas apakah cara ini yang di terapkan pihak blogger pada template dinamis

    • Taufik Nurrohman

      Syarat tampilan dinamis bisa bekerja adalah feed posting blog tidak boleh dipotong/harus diset ke mode penuh. Itu artinya bahwa AJAX tampilan dinamis Blogger menggunakan JSON dan tidak berinteraksi dengan HTML blog sedikitpun.

  • Unknown

    mas mau nanya lagi nih..
    apa fungsi load atau $.get() dapat memanggil link tanpa akhiran .html??
    karena saya coba untuk mendapatkan data dari akun google code misal seperti ini:
    $('#judulgooglecode').load('http://code.google.com/p/mini-web-tools/downloads/list #pname span');
    atau
    $(window).load(function(){
    $.get('http://code.google.com/p/mini-web-tools/downloads/list', function(data) {
    $('#judulgooglecode').html($(data).find('#pname span'));
    });
    });

    hasilnya tidak muncul..
    kira2 di sebelah mana salahnya mas??

    • Taufik Nurrohman

      AJAX cuma berlaku untuk domain lokal. Memuat bagian halaman dari situs lain, memakai cara apapun tetap tidak akan bisa.

      • Unknown

        oh jadi tdk bisa..

Komentar telah ditutup.