Jumat, 21 Oktober 2011

Ajax – Menampilkan Data Masukan Secara Langsung

Teknologi Ajax memungkinkan webmaster mengolah atau merespon data yang dimasukkan oleh user secara langsung tanpa berganti halaman. Pengolahan data ini dimanfaatkan untuk aplikasi menghitung jajak pendapat, menampilkan komentar, dan sebagainya.

Tip kali ini membuat demo aplikasi Ajax yang dapat secara langsung mengolah data masukan. Ada 3 buah file yang diperlukan, yaitu file JavaScript yang digunakan untuk mengirimkan request langsung ke server, file HTML utama yang digunakan sebagai form yang mempunyai masukan, dan file PHP untuk memproses data yang telah dimasukkan.

Langkah-langkah untuk membuatnya adalah pertama membuat file JavaScript-nya dan beri nama ajaxtest.js. Pada file JavaScript tersebut terdiri dari 3 buah fungsi yang penting, yaitu createXMLHttpRequest() yang berguna untuk membuat koneksi objek Ajax. Fungsi ini langsung dipanggil begitu file JavaScript di-load. Yang kedua adalah fungsi sendRequest(), fungsi ini dipanggil ketika masukkan yang ada di form di-submit. Fungsi yang ketiga adalah getForm() yang digunakan untuk mem-parse seluruh masukan yang ada. Untuk file utama HTML kita beri nama ajaxtest.html.

Terakhir adalah file proses.php. Disini hanya digunakan untuk menampilkan semua elemen yang telah dikirimkan. Untuk mencobanya pertama kita Load file ajaxtest.html ke browser. Lalu isi data sebagai contoh, setelah diklik “go”, maka browser segera akan memproses masukan tanpa me-refresh halaman.

Source code lengkap dari langkah-langkah diatas silahkan download disini.




Ajax – Menampilkan Data Masukan Secara Langsung Rating: 4.5 Diposkan Oleh: dragon
Terima kasih sudah berkomentar