Assalamualaikum … Selamat malam teman-teman,
aku sekarang sedang ada di warnet download file karena banyak dan makan waktu daripada bengong browsing2 iseng2 aku mau nulis mengenai Ajax. lho ko di warnet? iya kalau di rumah ada anak sedang main mario bros di laptop, kasihan , akhirnya sebagai ayah yang baik ( ciee..) aku ngalah ke warnet.
Logo jQuery
Baik, Aku akan mencontohkan penggunaan Ajax dengan menggunakan jQuery.
script nya mudah , sangat mudah jika dibandingkan dengan ajax murni javascript. jQuery sendiri adalah salah satu framework javascript itu sendiri.
langsung aja ya , biar ngga kelamaan pembukaannya.
1. pertama buat satu folder, misal namanya : ajax
2. buat file index.html
3. Download javascript library pada situs aslinya http://jquery.com
4. Masukkan library tersebut ke dalam folder ajax
5. Tuliskan tag dan script di bawah ini ke dalam file index.html
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Ajax Basic</title>
<script src=”jquery-1.4.min.js” type=”text/javascript” language=”javascript”></script>
</head>
<body>
<script type=”text/javascript”>
$(function()
{
$(‘button’).click(function(){
$(‘#result’).load(‘load.html’);
});
})
</script>
<button>Klik</button>
<div id=”result”></div>
</body>
</html>
6. Buat satu file dengan nama load.html, dan isikan :
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Load File</title>
</head>
<body>
<h2>Hai ini adalah isi dari file load.html</h2>
</body>
</html>
untuk struktur folder nya biar mudah aku printscreen seperti ini :
folder
kemudian jalankan di browser http://localhost/ajax/index.html
maka akan tampil pertama dengan tampilan :
Tampilan awal
setelah button Klik diklik maka akan tampil :
hasil ajax
kita akan lihat bahwa tulisan ‘Hai ini …dst’ adalah dari file load.html
inilah fungsi ajax me-load data dari file lain tanpa refresh ,dengan klik button kita akan melihat ada data dari file lain, lho ko bisa ?
berikut penjelasannya :
<script src=”jquery-1.4.min.js” type=”text/javascript” language=”javascript”></script>
——–> ini adalah wajib dimasukkan
dan inilah rahasianya :
<script type=”text/javascript”>
$(function() // artinya jQuery mulai
{
$(‘button’).click(function(){ // artinya : jika button diklik, maka akan menjalankan perintah di bawah ini
$(‘#result’).load(‘load.html’); // mengambil isi yang ada di file load.html dan ditaruh di tag html yang ber id ‘result’
}); // tutup button click
}) //tutup jQuery
</script>
Gimana teman-teman?
kurang dipahami ya, maaf ya aku penjelasannya kurang dapat dipahami
jika ada yang belum paham silahkan bertanya di komentar di bawah
untuk ajax , contoh di atas adalah basic, setidaknya agar kita paham bahwa ajax bahasa gampangnya adalah melakukan pertukaran data atau mengambil data dari file lain tanpa refresh.
Terima kasih,
Wassalamualaikum…
di warnet, 7 Oktober 2011
Mahrizal
Mahrizal 
mantap gan, numpang sedot ilmunya yach gan
SukaSuka
sok atuh gan
SukaSuka