Script AJAX Sederhana menggunakan jQuery

07 May 2008

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:

$(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

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

$(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:

Downloaded a total of 281 times

Tags: ajax, ajax sederhana, html, javascript, jQuery, pemrograman, PHP, Programming, simple ajax, Tutorial, web

Posted in Programming, Tutorial

33 Responses

black_id

07 May 2008 at 16:13

gilaaa… ko bisa yak keluar isinya sendiri.. hiiiiii… atut ada setannya neh di belakang layar… ngibrit dlu ah…
gawibowo

07 May 2008 at 16:33
wekadesign

11 May 2008 at 22:48

Kalo ga ingin update JQuery nya secara manual… kita bisa juga lo ambil jquerynya langsung dari servernya
gawibowo

12 May 2008 at 15:36

oh iya ya.. ada juga cara kyk gitu
sepertinya lebih mudah…daripada harus update2 terus
sungguh luar biasa ide anda
sip sip sip sip sip sip sip sip sip sip sip sip ..
wekadesign

14 May 2008 at 01:02

Tapi untuk SEO bagaimana neh… terhandle juga tidak?? Ato emang lebih ditujukan pada backoffice page??
gawibowo

16 May 2008 at 09:15

setahuku sih content yang diambil oleh script ajax tidak bisa terindex oleh search engine..
jadi ya script yang masih sederhana ini tidak SEO friendly..
Deni

13 Jul 2008 at 14:06

Mantap boss
Rius

14 Jul 2008 at 13:15

Mas, wibowo,
kalo di dalem content.php itu ada link ato <a href gimana nampilinnya lagi ?

please help

Thanks
gawibowo

14 Jul 2008 at 14:09

file content.php itu isinya cuma berupa content saja yg akan ditampilkan sewaktu kita klik link di atasnya (link 1, link 2,… dst)
jadi ya tidak ada masalah kalau di dlm content tsb ada link (a href), nanti akan muncul sebagai link biasa
cheebhodh

23 Jul 2008 at 07:16

Hm… bagus juga tuh
Ngomong2 lebih bagus mana ya Mootools dengan jQuery??? Aq jadi bingung nih
gawibowo

23 Jul 2008 at 09:03

jQuery dan MooTools, masing-masing memiliki kelebihannya sendiri. Kalau memang anda bingung dan harus memilih di antara keduanya, pilih saja yang paling cocok untuk kebutuhan anda, dan tentunya yang paling mudah untuk dipelajari
Submit Form Dengan Ajax Menggunakan jQuery | Gatot Ari Wibowo

29 Jul 2008 at 17:05

[…] pada artikel sebelumnya saya sudah membahas tentang cara menampilkan halaman menggunakan AJAX (dengan fungsi load pada […]
Oka Dayendra

07 Aug 2008 at 16:08

gawibowo
16 May 2008 at 09:15
setahuku sih content yang diambil oleh script ajax tidak bisa terindex oleh search engine..
jadi ya script yang masih sederhana ini tidak SEO friendly..

#####################
Untuk SEO memang ga bisa tapi bisa diakali dari URL, jadi tetap bisa terindex content yg diambil dengan script ajax.
Kita buat 2 bagian, bagian statis dan dinamis.
Bagian dinamis itu yang saat request data oleh AJAX, sedangkan bagian statis nya kita buat URL untuk content yang diambil dgn AJAX tadi, jadi tetap bisa di index oleh search engine. Kunjungi aja www.dayendra.web.id atau www.tienslife.com untuk lihat demo nya
gawibowo

10 Aug 2008 at 16:15

@Oka Dayendra:
Terimakasih atas masukannya. Saya sudah mengupdate script di demo saya, sekarang sudah menggunakan link biasa (misalnya a href=”content.php”, bukan link ke fungsi javascript.
Jadi seandainya javascript pada browser mati, link nya tetap bisa berjalan.
Mungkin yang anda maksud adalah seperti ini?
Indra

02 Sep 2008 at 13:53

Rius

14 Jul 2008 at 13:15

Mas, wibowo,
kalo di dalem content.php itu ada link ato <a href gimana nampilinnya lagi ?

gawibowo

14 Jul 2008 at 14:09

file content.php itu isinya cuma berupa content saja yg akan ditampilkan sewaktu kita klik link di atasnya (link 1, link 2,… dst)
jadi ya tidak ada masalah kalau di dlm content tsb ada link (a href), nanti akan muncul sebagai link biasa

——-

Kalo nampilinnya bukan sebagai link biasa tapi seperti link yang di file utama gimana ya mas? (Dengan kata lain di file content.php terdapat link yang jika di klik munculnya ya dihalaman utama dengan prilaku sama dengan file content.php ketika link di halaman utama kita klik)

Terimakasih
gawibowo

07 Sep 2008 at 13:33

@Indra:
bisa saja mas, coba saja masukkan link seperti ini di dalam file content.php :
```
<a href="content.php?id=4" onclick="$('#container').load($(this).attr('href'));return false;" rel="nofollow">Tes Menu 4</a>
```
rel=”nofollow” nya bisa diabaikan (itu otomatis dari wordpress)
orakanggo

17 Sep 2008 at 13:54

kalo pake POST gmn ya mas?
gawibowo

17 Sep 2008 at 15:36

@orakanggo:
secara default fungsi load() akan melakukan request dengan metode GET, tapi dengan mengisi parameter yang kedua bisa kita ganti menggunakan POST, contohnya sbb:
```
$("#container").load("content.php", {type: "POST", data: "nama=asdf&alamat=zxczv"});
```
atoeyz

23 Sep 2008 at 11:39

sediain dunk link buat donlot nya prasaan demo mulu adanya
gawibowo

23 Sep 2008 at 18:15

@atoeyz:
link downloadnya sudah saya sediakan.
silakan download sepuasnya…
AJ.

24 Sep 2008 at 18:49

mas, untuk update sebuah (atau lebih) elemen (div/span), untuk menampilkan sebuah statistik yang selalu berubah, ter-update secara realtime gmana kodenya?

nuhun
gawibowo

25 Sep 2008 at 09:23

@AJ.:
AJAX autoupdate: mungkin bisa dengan script seperti ini:
1 2 3 4
function updateStatistik() { $('#stat').load('statistik.php'); } setInterval(updateStatistik, 10000);
10000 : contentnya akan diupdate setiap 10000 ms atau 10 detik
silakan diganti seperlunya
AJ.

25 Sep 2008 at 10:03

mantep banget…

thanks banyak
AJ.

25 Sep 2008 at 10:45

mas, mo nanya lagi…

ane punya halaman website (template seperti smarty), di dalam template tersebut ada variable seperti:
$(uptime)

nah, variable $(uptime) tersebut cuman bisa ter-update kalau halaman website di-refresh, sementara saya tidak mungkin memanggil variable melalui fungsi load(), karena ini variable template.

gmana penggunaannya di jQuery supaya variable tersebut bisa ter-update tanpa refresh halaman.

maaf nanya mulu, and thanks.
gawibowo

25 Sep 2008 at 11:09

kalau gini gimana:
isi dari variabel $uptime tsb (mungkin berupa fungsi yang menghasilkan uptime) dipisah ke dalam file tersendiri misalnya uptime.php
kemudian file tsb dipanggil lewat fungsi load(’uptime.php’)
AJ.

25 Sep 2008 at 14:08

hehehe, metode itu sudah ane coba dan hasilnya variable kosong, dan ternyata variable $(uptime) tersebut hanya bisa ditampilkan oleh halaman template khusus

ane sih maklum saja, soalnya core program webnya saja ane gak tau itu pake PHP, CGI, Perl atau lainnya, soalnya program embedded, jadi terbatas untuk utak-atik

btw, thanks atas reply-nya
gawibowo

25 Sep 2008 at 14:27

atau gini mungkin juga bisa mas:
anda panggil saja halaman tersebut lagi lewat fungsi load(), tapi tidak perlu memuat seluruh halamannya, hanya sebagian elemennya saja
misalnya itu halaman index.php :
1
load('index.php #uptime');
dengan catatan, variable $(uptime) nya dimasukkan ke dalam element dengan id uptime
1 2 3
<span id="uptime"> $(uptime) </span>
TItasix

26 Sep 2008 at 09:16

kalau meretrieve Grid Ajax menggunakan jquery gmn yach? saya bikin toolkit ajax basis Twilight plus generatornya tapi waktu digabungin ke FaceBocorenya jquery) ajax saya di kepanggil apa mungkin bentrok?
gawibowo

26 Sep 2008 at 10:08

@TItasix:
grid ajax itu maksudnya gimana ya? saya belum pernah tahu tentang Twilight/toolkit ajax. apa ada contohnya yg bisa saya lihat?
AJ.

26 Sep 2008 at 10:34

@gawibowo
nah, itu baru manteppp..!!! sukses banget

saya yakin klo ajax bisa menangani masalah sangat sepele begitu

makasih petunjuknya mas…
titasix

07 Oct 2008 at 21:47

Kemana saya kirim sample Toolkit ajax dan generatornya biar kita bisa sharing gabungin dengan Jquery? mungkin rekan2 yang lain bisa kasih masukan.atau mas punya YM nya? id YM saya tommy_share@yahoo.com.sg
gawibowo

07 Oct 2008 at 22:15

di halaman contact mas ada alamat saya
Ricky Junior programer

01 Nov 2008 at 10:40

Mas gatot ok banget. Sangat membatu.klo bisa tambahin bagaimana caranya untu multiple insert dengan checkbox

Script AJAX Sederhana menggunakan jQuery

33 Responses

Leave a Comment

Search

Categories

Recent Entries

Archives

Blogroll

Personal Links

Tags

Metal