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.
Dengan menggunakan jQuery, "memainkan" AJAX menjadi lebih mudah, karena jQuery sudah menyediakan function-function siap pakai untuk AJAX dan manipulasi DOM (dipakai untuk response/timbal balik ketika AJAX dijalankan).
OK langsung saja kita mulai tutorialnya.
Untuk deklarasi AJAX dengan menggunakan jQuery adalah dengan memanggil function .ajax(). Bentuk scriptnya adalah:
Tetapi script di atas tidak akan berfungsi karena kita tidak meletakkanya setelah DOM ready dan tidak mempunyai option yang dibutuhkan untuk request. Adapun option dan method yang dibutuhkan dalam AJAX memakai jQuery antara lain:
URL, menentukan alamat URL mana yang akan direquest oleh HTTP Request (AJAX)
type, tipe request yang akan dijalankan, apakah POST atau GET
BeforeSend, event yang dilakukan ketika HTTP Request akan diproses
Complete, event yang dilakukan ketika HTTP Request selesai dijalankan, namun tidak melihat apakah request sukses atau gagal
Success, event yang dilakukan ketika HTTP Request selesai dan berhasil dijalankan dan mempunyai nilai balik yaitu data hasil request
Data, data yang dikirim ke server ketika request dan diolah di server. Data ini akan diperlakukan berdasarkan 2 type yang ditentukan, yaitu GET atau POST.
Sebenarnya masih ada options yang lain, tetapi yang perlu diketahui dan biasa dipakai adalah yang di atas tersebut.
Untuk pemanggilan options tersebut, caranya dengan memasukkan ke dalam function ajax tadi berbentuk struktur objek javascript. Contoh:
1
2
3
4
5
6
7
8
9
10
11
12
|
$.ajax({
url: "lakukan_proses.php",
type: "POST",
data: $('#form').serialize(),
beforeFilter: function(){
$('#loading').show();
},
success: function(html){
$('#loading').hide();
alert(html);
}
});
|
Di atas adalah contoh penggunaan AJAX sederhana yang melakukan request ke file lakukan_proses.php, data yang dikirim adalah inputan dari sebuah form yang mempunyai id form (ingat selection id dengan CSS, sama aja). Sebelum proses dijalankan, tampilkan gambar loading, kemudian setelah request selesai dijalankan dan membawa timbal balik html, maka sembunyikan loading, dan tampilkan alert yang berisi html timbal balik (response) dari server.
Tutorial
Ok, langsung aja kita praktik membuat aplikasi sederhana menggunakan PHP dan AJAX jQuery.
Setelah server Apache dijalankan, silakan buat sebuah folder beserta file index.php di dalamnya, misalnya nama folder adalah "ajax". Simpan index.php di dalam folder ajax, dan simpan di dalam server webroot kamu, misalnya di xampp\htdocs\.
Sekarang, isikan file index.php tersebut dengan kode di bawah ini:
1
2
3
4
5
6
7
8
9
|
<html>
<head>
<title>Contoh AJAX</title>
</head>
<body>
<button id="tombol">Klik di sini!</button>
</body>
</html>
|
Pada tahap ini, kamu sudah membuat suatu halaman HTML sederhana yang berisi sebuah tombol bertuliskan "Klik di sini!". Kita akan melakukan sesuatu dengan tombol ini. Tetapi sebelumnya, buatlah satu buah file bernama proses.php dan simpan satu folder dengan file index.php tersebut. Isi dari fileproses.php adalah:
1
2
|
<?php
echo "HELLO DUNIA!";
|
Kita akan mencoba me-request file proses.php dari file index.php dengan menggunakan metode AJAX. Tambahkan kode berikut ini sebelum tag penutup </head>.
1
2
3
4
5
6
7
8
9
10
11
12
|
<script>
$().ready(function(){
$('#tombol').click(function(){
$.ajax({
url: "proses.php",
success: function(html){
alert(html);
}
});
});
});
</script>
|
Selamat, Kamu sudah membuat aplikasi berbasis AJAX yang paling sederhana di dunia. Saya heran, kenapa semua programming pasti yang diajarkan pertama adalah menampilkan tulisan Hello World. Apapun itu, gak masalah, yang penting kita bisa melakukannya hehe..
Jika kamu mengikuti tutorial dengan benar, maka ketika kamu klik tombol tersebut maka akan muncul tulisan Hello World berdasarkan isi dari proses.php. parameter html adalah response hasil request pada file proses.php.
Oke kita sekarang akan lanjutkan tutorial tadi dengan menambahkan status loading di atas tombol :)
Tambahkan span loading di atas tombol:
1
|
<span id="loading" style="display:none">LOADING...</span><br />
|
Span tersebut ditambahin style display = none yang artinya span loading tidak ditampilkan. Nanti span ini akan tampil ketika kita klik tombol dan akan kembali menghilang.
Setelah itu, ubah script ajax tadi menjadi sebagai berikut:
1
2
3
4
5
6
7
8
9
10
|
$.ajax({
url: "proses.php",
beforeSend: function(){
$('#loading').show();
},
success: function(html){
$('#loading').hide();
alert(html);
}
});
|
Kode yang ditambahkan adalah function beforeSend dan penanganan loading. beforeSend adalah event/kejadian di mana request akan dikirim (pre-request), dan saat itu program menampilkan span yang idnya adalah loading dengan menggunakan function show(). Kemudian, setelah sukses dan sebelum alert ditampilkan, maka sembunyikan tulisan loading tersebut (hide). Tulisan loading akan cepat menghilang kembali karena kamu menjalankannya di lokal :D, requestnya sangat cepat. Hehe..
Kode lengkap untuk /ajax/index.php adalah sebagai berikut:
Kali ini saya akan share tutorial AJAX yang pertama di Jagocoding.com dengan menggunakan jQuery. Bagi yang belum tahu apa itu jQuery, silakan baca artikel ini: