AJAX JQuery: Memuat Beberapa Bagian Halaman Sekaligus Dalam Satu Kali Permintaan

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:

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');