AJAX (Asynchronous JavaScript and XML) adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data antara client dengan server secara asynchronous, yang artinya komunikasi terjadi di belakang layar sehingga halaman web tidak harus dimuat ulang hanya untuk mengganti sebagian dari isinya.
Sebelum era jQuery, pemrograman AJAX sangat sulit dilakukan, karena berhubungan dengan pengaksesan DOM menggunakan JavaScript. Terimakasih kepada jQuery, sehingga pemrograman menggunakan teknik AJAX bisa menjadi lebih mudah dan cepat.
Penerapan teknik AJAX yang paling sederhana adalah untuk memanggil dan memuat sebuah dokumen HTML ke dalam DOM. Teknik ini dapat dengan mudah kita wujudkan dengan menggunakan fungsi load() dari jQuery. Secara singkat fungsi ini berguna untuk memuat data (HTML dokumen) dari server dan menyisipkannya ke dalam elemen yang sesuai.
$(document).ready(function() {
$('#tombol').click(function(){
$('#container').load('content.html');
});
});
Selain menggunakan fungsi jQuery load(), potongan kode di atas juga menggunakan fungsi click(). Fungsi ini akan dieksekusi ketika ada click event (user meng-klik sebuah tombol atau link). Fungsi ini mirip dengan JavaScript event onClick.
Berikut ini adalah source code lengkapnya. Untuk mencoba kode ini, dibutuhkan juga sebuah file HTML yang akan dipanggil, beri nama “isi.html” dan isilah dengan sembarang kode HTML.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tombol').click(function(){
$('#kontainer').load('isi.html');
});
});
</script>
</head>
<body>
<input type="button" id="tombol" value="klik di sini">
<div id="kontainer">
<!--Isi dari file content.html akan ditampilkan di sini-->
</div>
</body>
</html>
Ketika tombol diklik, AJAX memanggil URL “isi.html” dan menyisipkannya ke dalam DOM. DOM yang dimaksud di sini adalah sebuah elemen dengan id=”kontainer”.
Karena fungsi jQuery click() mirip dengan event JavaScript onClick, maka source code di atas dapat juga ditulis seperti berikut:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadIsi(){
$('#kontainer').load('isi.html');
}
</script>
</head>
<body>
<a href="#tombol" onclick="loadIsi(); return false;">load isi</a>
<div id="kontainer">
<!--Isi dari file content.html akan ditampilkan di sini-->
</div>
</body>
</html>
