Setelah kemarin menulis artikel tentang jQuery, dimana disana saya menjelaskan dasar-dasar dari jquery yang perlu temen-temen ketahui. Karena jQuery itu gak sulit, Gampang pokoknya.
Dalam postingan kali ini saya akan mencoba menjelaskan tentang penggunaan Ajax, (bukan ajax club bola ya,,hehehehhehe). Ajax yang saya gunakan kali ini dikombinasikan dengan jQuery dimana dengan menggunakan jQuery, script menjadi lebih sederhana dan rapi dibandingkan dengan JavaScript murni. Sebelumnya saya akan menjelaskan tentang apa itu Ajax. Berikut adalah penjelasan yang saya kutip dari wikipedia :
Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.
Intinya selama ini ajax saya gunakan untuk membuat suatu aksi dalam suatu halaman web dapat kita lakukan tanpa mereload page itu sendiri, melainkan Ajax yang melakukannya. Nah dalam contoh kali ini saya akan mencontohkan penggunaan Ajax dengan event JQuery. Contoh yang saya ambil disini adalah bagaimana menampilkan data pada suatu halaman tanpa perlu mereloadnya.
Ok, langsung saja berikut adalah langkah-langkahnya... untuk penjelasannya saya juga berikan dalam coding. Oh ya.. untuk dapat menjalankan ajax ini file html harus disimpan dalam server. Anda dapat menggunakan aplikasi XAMPP atau WAMPP intinya yang memiliki WEB Server.
1. Buat 2 buah file HTML, 1 untuk web utama dan 1 untuk halaman yang akan kita panggil dengan ajax
file ajax.html
<html>
<head>
</head>
<body>
<button id="call_ajax">Panggil Ajax</button>
<br>
<br>
<div id="text">TEXT Awal</div>
<br>
<br>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//fungsi onclick untuk button dengan id=call_ajax
$('#call_ajax').click(function(){
//panggil ajax
$.ajax({
url : 'data_ajax.html', //file yang akan kita load
success : function(response){ //response ini nantinya yang menyimpan data hasil load tadi
$('#text').html(response); //ubah tag html dengan id text menjadi data html yang sudah disimpan dalam response
}
});
});
});
</script>
</body>
</html>
file data_ajax.html
<!doctype html>
<html>
<head>
</head>
<body>
<p>Anda sudah memanggil halaman data ajax, Terimakasih</p>
</body>
</html>
struktur file :
file ajax.html
<html>
<head>
</head>
<body>
<button id="call_ajax">Panggil Ajax</button>
<br>
<br>
<div id="text">TEXT Awal</div>
<br>
<br>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//fungsi onclick untuk button dengan id=call_ajax
$('#call_ajax').click(function(){
//panggil ajax
$.ajax({
url : 'data_ajax.html', //file yang akan kita load
success : function(response){ //response ini nantinya yang menyimpan data hasil load tadi
$('#text').html(response); //ubah tag html dengan id text menjadi data html yang sudah disimpan dalam response
}
});
});
});
</script>
</body>
</html>
file data_ajax.html
<!doctype html>
<html>
<head>
</head>
<body>
<p>Anda sudah memanggil halaman data ajax, Terimakasih</p>
</body>
</html>
struktur file :
Setelah semuanya sudah siap, silahkan jalankan programnya melalui localhost dan panggil file ajax.html ... ingat ajax bisa berjalan di sisi server, jika service web server belum dijalankan maka ajax tidak bisa berjalan,,,
selamat mencoba.. tingggalkan komentar jika ada yang belum dipahami,,,,
selamat mencoba.. tingggalkan komentar jika ada yang belum dipahami,,,,
No comments:
Post a Comment