Ajax merupakan teknik pemrograman web dinamis menggunakan javascript. Ajax dapat digunakan untuk mengambil data dari database tanpa harus me-reloading halaman atau berpindah url. Fungsi ajax dapat dikombinasikan dengan button atau event lainnya.
Pada artikel ini akan dijelaskan mengenai penggunaan Ajax pada JQuery, pembaca diharapkan sudah mengerti dasar php, html, javascript dan JQuery seperti membuat function, deklarasi variabel dan mengakses DOM dengan JQuery.
Berikut ini adalah contoh penggunaan Ajax pada JQuery.
Kode ini diletakkan di dalam $(document).ready(function(){} )
$.ajax({
url: http://www.yohanli.com/index.php/c_contoller_anda/fungsi_yang_dipanggil, //misalnya url controller anda
data: parameter,
cache: false,
dataType: “json”,
beforeSend: function() {before_ajax();},
complete: function() {after_ajax();},
success: function(result_json) {success_function(result_json);}
});
Data parameter
Parameter merupakan variabel yang akan di pass ke halaman selanjutnya. Contoh parameter didapatkan dari input box dengan id input_box_1, maka akan ditulis dengan format: ‘data1=’ + $(# input_box_1).val(). parameter ini mem-passing variabel data1 di url tujuan. Variabel ini dapat diakses dengan cara $_GET[‘data_1’] menggunakan php.
Multiple parameter dari banyak input box dapat dilakukan dengan contoh berikut ini:
var parameter = ‘data1=’ + $(#input_box_1).val() + ‘&data2=’ + $(#input_box_2).val()’;
Kode di atas menjelaskan bahwa akan ada 2 variabel yang dipass yaitu data1 dan data2 yang diambil dari input_box 1 dan input_box_2
Pada url tujuan, variabel ini dapat diambil menggunakan php dengan cara $_GET[‘data1’] dan $_GET[‘data2’]
Function
Fungsi before_ajax(), after_ajax() dan success_function() merupakan fungsi javascript yang maxing-masing akan di-execute pada saat terjadi ajax request. Fungsi ini dapat diletakkan di dalam $(document).ready(function() ).
function before_ajax()
{
// Kode ini akan dipanggil sesaat sebelum ajax request
}
function after_ajax()
{
// Kode ini akan dipanggil sesaat sesudah ajax request
}
function success_function(result_json)
{
// Kode ini dipanggil setelah ajax berhasil memberikan return yang dapat berupa json, jsonp, xml, script, text atau html.
}
Variabel yang didapat dari ajax dapat diakses langsung oleh javascript. Pada contoh ini digunakan JSON, JSON lebih fleksibel dan relatif simple daripada xml.
Contoh apabila return merupakan json data berupa {“hasil”: {“nama” : “saya”, “umur” : “20 tahun”}}
Data ini dapat diakses dengan cara:
result_json[‘hasil’][‘nama’] akan menghasilkan string “saya”
result_json[‘hasil’][‘nama’] akan menghasilkan string “20 tahun”
Kode PHP URL Tujuan
Berikut adalah contoh coding URL tujuan
<?php
class C_Controller_Anda {
function __construct()
{
// Kode Constructor
}
function index()
{
// Kode Index
}
function fungsi_yang_dipanggil()
{
// di sini diletakkan kode untuk menyajikan data return
$data_pertama = $_GET[‘data1’]; // ini adalah cara mengambil parameter data1
$data_kedua = $_GET[‘data2’]; // ini adalah cara mengambil parameter data2
$result_json = $this->Model_Anda->fungsi_di_dalam_model_yang_dipanggil($data_pertama, $data_kedua);
echo $result_json; // ini data yang akan diterima oleh ajax
}
} ?>
Selamat belajar…
