Belajar Ajax dan JQuery

Dah lama nggak bikin tutorial coding, yok mari belajar ajax dengan jquery?
Eittzz, sebelumnya sudah pada tahu belum ajax itu apa??

Nih sedikit kutipan 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. Selengkapnya

Lha terus? jQuery itu apa?

Nah, ini sedikit contekan dari wikipedia lagi:

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL. Selengkapnya

Lha terus itu fungsinya buat apa?

sek sek,, tunggu sebentar,, pernah pesbukan (main facebook), twitter, koprol atau socmed lainya? nah itu rata rata memakai ajax. mungkin kita tidak sadar akan adanya fungsi ajax, cir ciri web yang memakai ajax adalah sedikit reload halaman.

kita akan coba buat suatu form yang akan mengirim 2 input data, biasanya kalau cuma html dan php mungkin setelah form kita submit, maka halaman akan melakukan proses dengan load halaman “action” yang di tujukan, kalau halaman “action” adalah diri sendiri maka akan di submit seperti refresh halaman.

contoh form http biasa:

1	<form action='kirim.php' method='post'>

2

3	Nama : <input type='text' name='nama'><br>

4	Alamat : <input type='text' name='alamat'><br>

5	<input type='submit' value='Kirim'>

6

7

form>

Jadinya seperti ini:

Nama :

Alamat :

Nah, ketika di klik kirim maka browser akan melakukan direct/mengirim data menuju file action. tapi berbeda dengan ajax. ajax akan menghandle pengiriman data tanpa kita sadari bahwa data terkirim ke file action. sebenarnya tetep loading juga, tapi kita tidak tahu. jadi dengan fitur ini kita tidak perlu banyak loading / reload halaman yang akan menghabiskan bandwith.

Berikut script yang akan kita buat eksperiment.

01	<script type='text/javascript' src='jq.js'>script>

02	<script type='text/javascript'>

03	$(document).ready(function(){

04	$("#panel").hide();

05	$("#klik").click(function(){

06	$("#panel").toggle();

07

})

08

})

09	$(document).ready(function(){

10	//$(function(){

11

12	$("#frm-ajax").submit(function(){

13

$.ajax ({

14	url:'kirim.php',

15	type:'POST',

16	data: $(this).serialize(),

17	success: function(data){

18	$("#panel").show(1000);

19	$("#panel").html(data);

20	//alert('adsfasdf');

21

}

22

23

})

24

})

25

})

26

27

//})

28

script>

Skrip berikut menandakan bahwa saya mengambil/me-linkkan halaman saya dengan script jquery.js yang saya rename menjadi jq.js, script library dapat di download di sini: http://docs.jquery.com/Downloading_jQuery

1	<script type='text/javascript' src='jq.js'>script>

Selanjutnya:

1	<b id='klik'>Toogleb>

2	<div id='panel' style='background-color: green; padding: 10px;'>Disini hasil akan di munculkan, tapi di sembunyikan jQuery saat load halamandiv>

3

<hr>

4	<form id='frm-ajax' onsubmit='return false'>

5	Nama : <input type='text' name='nama'><br>

6	Alamat : <input type='text' name='alamat'><br>

7	<input type='submit' value='Kirim'>

8

form>

Scritp di atas di tulis di satu file misal index.php dan jadikan satu dengan file jquery.js selanjutnya kita buat file pemroses datanya.

1

2	echo "Nama : ".$_POST['nama']." Alamat : ".$_POST['alamat']." Berhasil di Simpan !!";

3

?>

Simpan file tersebut dengan nama kirim.php atau dapat di sesuaikan dengan keinginan masing masing. jadi dalam satu folder nanti ada 3 file, yaitu file yang berisi form, file library jquery, dan file pemroses data. kalau punya saya nama filenya adalah: index.php, kirim.php, jq.js

sumber: http://sucipto.net