Dasar-Dasar Membuat Script AJAX

Buat: 08/03/2013 - 23:01
Dasar-Dasar Membuat Script AJAX

AJAX, singkatan dari “Asynchronous JavaScript and XML“, merupakan metode suatu laman web menggunakan JavaScript untuk mengirim dan menerima data dari server tanpa harus menyegarkan (refresh) laman itu. XML adalah sejenis markup language – seperti HTML, yang kerap dipakai untuk mengirimkan data melalui internet. Belakangan ini, JSON (“JavaScript Object Notation”) lebih populer dan bisa dibaca – secara bawaan (native) – oleh JavaScript.

Pada tutorial ini saya akan share tentang logika bagaimana script AJAX dibuat.

Mulailah dari tampilan sebagai berikut

desain form

Untuk isinya, saya menyarankan untuk penamaannya jelas buat tiap-tiap inputnya. dalam hal ini input text harus memiliki - id - class - name - value

Misalnya

<input type="text" id="text" class="text" name="text" value="">

Inspect Element

Dalam tutorial ini, saya menggunakan browser Google Chrome. Bila anda memakai Mozilla Firefox, silakan sesuaikan dengan tools yang ada. Untuk Google chromePertama buka inspect element, letakkan disalah satu input.

menu inspect element

Kita akan mendapatkan window yang muncul dibawah

tampilan inspect element chrome

Window ini berbeda tetapi intinya sama. Perhatikan pada form terdapat id="myForm", nantinya ini yang akan kita gunakan.

Debug

Untuk melakukan debug, saya memanfaatkan perintah console.log(). Dari window dibawah pilih tab console

tab console

yang saat dibuka masih kosong

Dibagian bawah kita menemukan tools penting, ada icon buat refresh, nenampilkan error dan lain-lain. Saran saya pilih all untuk menampilkan error yang terjadi

tab all

Coba jalankan 1 fungsi, dimana fungsi tersebut akan mengeluarkan input sebagai berikut. Gunakan code berikut

console.log('mulaiAjax dijalankan');

Pada tab console akan terlihat tampilan seperti berikut

tab console

Selanjutnya kita dapat menggunakan cara ini untuk melakukan debug untuk mengetahui isi/nilai variable

Menjalankan Fungsi

Untuk menjalankan fungsi, saya menaruh perintah di tombol submitnya. Code-nya adalah sebagai berikut

<button onclick='mulaiAjax();return false;'>click disini</button>
Return false digunakan agar form tidak ke submit. Isi dari fungsi mulaiAjax hanya 1 perintah yaitu console.log

Memasang Ajax

Perhatikan metode AJAXnya. Data akan dikirim dalam bentuk serialize dan akan dikembalikan dalam bentuk json. Kita akan langsung memasang AJAX dalam fungsi tersebut

var selectorform = 'form#myForm';          //Menentukan form yang akan dikirim datanya
var datax = $(selectorform).serialize();    //Mentukan data yang akan dikirim, jangan lupa pake serialize
var request = $.ajax({                    //Makukan request AJAX, dengan format serialized. "?act=tes" optional.
   url: "?act=tes",          
  type: "POST",          
data: datax,          
    dataType: "json"    
});

Mengeluarkan Ouput

Kita tak perlu membuat hasil itu keluar disini, tapi kita bisa menangkap data yang keluar saat dikirim ke target. Kebetulan karena posisinya sama, jadi kita dapat mengedit/tambahkan di atas script, seperti berikut.

if($_GET) {                                              //action klik button
   ob_start();                    
   if($_POST) {                                        //jika variabel $_POST ada isinya
      echo "isi dari nilai POST yang dikirim \n";  
       print_r($_POST);                                //tampilkan isinya
     $post=ob_get_contents();    
      ob_end_clean();        
       $a=array('post'=>$post);    
     echo json_encode($a);
     die($json);
   }  
}

Silakan pelajari sendiri ob_start, ob_get_contents dll

Kirim Data

Pertama pilihlah network dibagian bawah. Saat awal masih kosong

network awal

lakukan input data ke pada 2 form tersebut lalu submit

network setelah submit

Muncul sesuatu dibawah! nah disini kita bisa lihat apa aja yang dikirim (ingat script diatas)

data yang dikirim

Ternyata browser mengirim isi dari form di atas. Perhatikan penamaannya. memakai name dari input tersebut! Disini kita melihat script mengembalikan nilai post. Di script data yang dikirim bisa ditampilkan dengan

$("#hasil").html(msg.post);

atau tambahkan ini di bawah fungsi ajax di atas

request.success(function(msg) { 
    console.log('data sudah terkirim');    
$("#hasil").html(msg.post);
});

Mendapatkan Data

Setelah berhasil dapat data, tampilkan sesuai kebutuhan. Untuk script lengkap, cek di sini.

Penampakan

About Author

Tentang PHP Indonesia

PHP Indonesia adalah sebuah komunitas untuk semua orang yang mencintai PHP. Fokus utama kami adalah pemrograman menggunakan bahasa PHP, namun tidak menutup kemungkinan pembahasan yang mencakup keseluruhan LAMP stack. Topik bisa dari pemrograman PHP, penanganan memcached, optimasi database, konfigurasi server, tuning server web, application deployment, framework PHP, hosting pilihan dan sebagainya.

Petunjuk Penulisan

Berikut ini adalah beberapa petunjuk penulisan artikel. Petunjuk dibuat bukan untuk membatasi tetapi demi menjaga kualitas artikel yang terpublikasi di situs ini. Selain itu, keseragaman gaya bahasa dapat menjaga readibilitas (tingkat keterbacaan) sehingga pembaca akan lebih nyaman dalam membaca artikel di situs ini.