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

}

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