Belajar Ajax jQuery Basic

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
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
folder

kemudian jalankan di browser http://localhost/ajax/index.html

maka akan tampil pertama dengan tampilan :

tampilan awal
Tampilan awal

setelah button Klik diklik maka akan tampil :

load
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

2 thoughts on “Belajar Ajax jQuery Basic

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s