Bagian 9. Menggunakan JQuery AJAX

Penulis menyarankan Anda untuk mempelajari dulu bahasa pemrogaman PHP terlebih dahulu sebelum mempelajari bagian ini, karena Khusus untuk Ajax memiliki perlakuan yang berbeda, dan dia harus diletakkan ke dalam sebuah webserver dengan pengaksesan cara yang berbeda yakni menggunakan http://localhost/alamat-nya.

Setelah Anda mempelajari PHP baru Anda bisa kembali ke bagian ini untuk mengerti Apa itu Ajax, Konsep Ajax, dan cara menggunakan Ajax menggunakan JQuery.

AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru.

Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programmer. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll

Prosesnya adalah sebagai berikut. Web client merequest sebuah halaman PHP ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus merefresh halaman web.

Berbeda dengan php biasa, misalkan ketika Anda mengisi buku tamu, ketika selesai mengisi nama, email, dan komentar lalu mensubmitnya, maka Anda akan di arahkan menuju suatu halaman, kemudian akan balik lagi, menghasilkan refresh page. Berbeda halnya misalkan dengan ketika Anda membuat status di facebook, status Anda langsung ditampilkan di facebook, tanpa terjadi refresh page.

Menggunakan JQuery Get

Get digunakan untuk mengambil sesuatu yang di echo atau dihasilkan dari suatu server script misalkan PHP. Ada dua hal yang harus di lakukan, pertama adalah menyiapkan file php-nya, dan yang kedua adalah mempersiapkan htmlnya yang di mana didalamnya ada library jquery, dan kode jquery yang bisa mengambil data dari PHP.

Baca Juga

Bagaimana caranya ?

Script phpnya sebagai berikut, kita namakan get.php di letakkan di dalam folder xampp/htdocs/labjqueryajax. Anda akan mengerti direktori ini jika sudah mempelajari PHP.

<?php
echo "1 2 3 4 5 6";
?>

Kemudian script jquerynya adalah sebagai berikut :




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$.get("get.php",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
</script>
</head>
<body>
<h1>Latihan JQuery Bagian 9</h1>
<p>Kita akan mempelajari penggunaan AJAX dalam JQuery</p>
<button>Ambil Data Dari Server</button>
</body>
</html>

Perhatikan yang di beri tanda warna biru, get.php adalah nama filenya dan function(data,status) adalah bentuk standar dari jquery ajax menggunakan get. Kemudian dengan alert akan memunculkan kotak dialog alert yang berisi data yang di ambil dari server, dan status ketika sudah betul-betul mengambil, biasanya terisi success saja. Begitulah menggunakan jquery ajax dengan fitur get.

Menggunakan JQuery Post

Jika sebelumnya kita menggunakan get dalam mendapatkan data dari server scripting PHP, menggunakan JQuery ajax, kali ini kita akan mengirim dan juga mengambil data menggunakan metode post jquery.

Pertama persiapkan dulu file phpnya :

<?php
echo "Anda telah mengirimkan \nNama : " . $_POST['nama'] . "\nAlamat : " .
$_POST['alamat'] . "\n";
?>

Dengan script php ini akan menampilkan Nama dan Alamat yang dikirimkan via jquery POST.

Dan script lengkap JQuery Post nya adalah sebagai berikut :

Download source code latihan




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$.post("post.php",{nama:"Akief Takaful", alamat:"Jakarta" },function(data,status){alert("Data: " + data + "\nStatus: " + status);});
});
</script>
</head>
<body>
<h1>Latihan JQuery Bagian 9</h1>
<p>Kita akan mempelajari penggunaan AJAX dalam JQuery</p>
<button>Ambil Data Dari Server</button>
</body>
</html>

Menggunakan JQuery .ajax

JQuery memiliki fitur yang sangat powerful, yakni .ajax. Fitur ini memungkinkan kita mengirim data bertype POST ataupun GET. Anda bisa menyesuaikan berdasarkan kebutuhan, kehebatannya lagi adalah bisa mengirimkan satu form, atau inputan terpilih. Cara penggunaannya adalah sebagai berikut, pertama persiapkan dulu file phpnya

<?php
echo $_POST['ajaxInput'];
?>

Selanjutnya adalah file jquery htmlnya :




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('#ajaxTest').submit(function(eve){
eve.preventDefault();
$.ajax({
url: "ajax.php", type: "POST", dataType: "html",
data: $(this).serialize(), beforeSend: function(){
$('#waiting').text('Mohon Tunggu Sebentar').fadeIn('slow');
}, success: function(html){
$('#waiting').fadeOut('slow');
$('#result').text(html).fadeIn('slow').fadeOut('slow').fadeIn('slow');
}
});
});
});
</script>
</head>
<body>
<form method="POST" id="ajaxTest">
<input type="input" name="ajaxInput" />
<input type="submit" name="ajaxBtn" value="Test Button" />
</form>
<div id="waiting"></div>
<div id="result"></div>
</body>
</html>

Selamat mencoba..