Script 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.

Terimakasih kepada 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 pada sebuah link:

1
2
3
4
5

$(document).ready(function() {
	$('#link').click(function() {
		$('#container').load('content.php');
	});
});

keterangan:

• link adalah id dari link/tombol yang akan diklik
• container adalah id dari element yg akan memuat isi dari script content.php

Contoh penggunaan yang lebih dinamis (dengan mengambil nilai dari attribute href) :
Misalnya ada sekumpulan link di dalam sebuah div

1
2
3
4
5
6
7
8

<div id="menu">
	<ul>
		<li><a href="content.php?id=1">Menu 1</a></li>
		<li><a href="content.php?id=2">Menu 2</a></li>
		<li><a href="content.php?id=3">Menu 3</a></li>
		<li><a href="content.php?id=4">Menu 4</a></li>
	</ul>
</div>

Tanpa penambahan script, link-link tersebut akan diproses sebagai link biasa.
Supaya semua link-link tersebut bisa diproses dengan ajax, tambahkan script sbb:

1
2
3
4
5
6
7

$(document).ready(function() {
	$('#menu a').click(function() {
		var url = $(this).attr('href');
		$('#container').load(url);
		return false;
	});
});

Untuk lebih jelasnya silakan lihat demo:
Demo AJAX

Anda bisa mendownload source code nya di sini:
jQuery AJAX (22009 downloads)