Membuat aplikasi web menggunakan AJAX rasanya membuatku berpikir untuk tak perlu lagi mempelajari bahasa pemrograman aplikasi client-server …. Dalam kerangka sempit mungkin bisa dibenarkan tapi dalam kerangka besar masing-masing platform tentu memiliki keunikan tersendiri .
Ok tulisan saya kali ini bukan untuk membahas keunikan tersebut . Ribet , yang ada banyak komplain dari mbah-mbah desktop he he ……
Dalam keseharian bekerja, AJAX bisa dikatakan menjadi salah satu senjata ampuh saya dalam berdagang ( lho kok he he ) . Maksudnya dalam menjelaskan kepada pengguna kalau mereka menanyakan kenapa pakai web , tidak VB atau Delphi . Saya bilang , kan sudah seperti VB datau Delphi , tak ada lagi reload halaman setiap kali transaksi , Event tidak cuma ada ditombol submit dll . Dan salah satu senjata ampuh ketika melamar ….. kerja he he
Ok sobat , biasanya tulisan pertama seseorang mengenai AJAX adalah Pengenalan AJAX , apa itu AJAX ? Mengapa harus AJAX ? Cara kerja AJAX dll. Yah Mungkin lain kali dan terlebih sudah banyak sobat programmer yang membahas topik ini .
Baik , tanpa berpanjang lebar langsung saja kita kupas topik kali ini yaitu menampilkan data di form menggunakan AJAX . Pada metode konvensional html + server script , data di form akan langsung dikirimkan ke file pengolah diserver dan dikembalikan dalam bentuk html . Padahal yang kita butuhkan hanyalah data-data sesuai dengan query yang kita kirimkan . Mubazir dan browser akan menampilkan file html utuh yang dikirimkan oleh web server .
Prinsip AJAX sesungguhnya adalah menerima data permintaan dari client script , memprosesnya , kemudian mengirimkan ke server script dan menerima kembali hasil dari permintaan , dan menyerahkan hasilnya ke client script. Sederhana , lebih hemat bandwith , mempercepat akses karena ukuran data kecil.
Berikut contoh menampilkan data di form menggunakan AJAX . Agar lebih mudah saya buat dalam 2 file yaitu ajax.html dan ajax.php . File ajax.html berfungsi sebagai client script dimana terdapat form data dan AJAX script untuk mengirim dan mengambil data dari dan ke server script ajax.php . Sedangkan ajax.php sendiri berfungsi untuk memproses query yang dikirimkan dan mengirimkan hasilnya ke client script melalui AJAX.
——————————————————————————-
File ajax.html
<html>
<head><title>Menampilkan data di form menggunakan AJAX</title>
</head>
<body>
<script language=’javascript’>
// <![CDATA[
// Membuat object XMLHttpRequest .
function createRequestObject() {
var ajax;
i f (navigator.appName == 'Microsoft Internet Explorer') {
ajax= new ActiveXObject('Msxml2.XMLHTTP');
} else {
ajax = new XMLHttpRequest();
}
return ajax;
}
var http = createRequestObject();
function sendRequest(nama)
{
if(nama=="")
{
alert("Mohon pilih salah satu nama !");
}
else
{
http.open('GET', 'ajax.php?nama=' + encodeURIComponent(nama) , true);
http.onreadystatechange = handleResponse;
http.send(null);
}
}
function handleResponse()
{
if(http.readyState == 4){
var string = http.responseText.split('&&&');
//alert(string[0]);
document.datapribadi.alamat.value = string[0];
document.datapribadi.umur.value = string[1];
document.datapribadi.pekerjaan.value = string[2];
}
// ]]>
</script>
<form name=”datapribadi”>
<select name=”nama” onchange=”new sendRequest(this.value)”>
<option value=”">Pilih Nama</option>
<option value=”teddy”>Teddy Aprilianto</option>
<option value=”yayan”>Deni Fitrian</option>
</select>
Alamat : <input type=”text” name=”alamat” size=36>
Umur : <input type=”text” name=”umur” size=15>
Pekerjaan : <input type=”text” name=”pekerjaan” size=25>
</form>
</body>
</html>
—————————————————————————-
file ajax.php
<?php
$nama = $_GET["nama"];
if($nama==”teddy”)
{
$alamat = “Jakarta”;
$umur = “28 tahun”;
$pekerjaan = “IT Consultant”;
}
else
{
$alamat = “Cikarang”;
$umur = “22 tahun”;
$pekerjaan = “Engineer”;
}
$data = $alamat.”&&&”.$umur.”&&&”.$pekerjaan;
echo $data;
?>
Konsep dari contoh diatas adalah dari satu data yaitu nama dikirimkan untuk mendapatkan beberapa data. Beberapa data tersebut digabungkan dalam satu variabel dengan pemisah &&& . Kemudian oleh Javascript dipisahkan menggunakan perintah split dan di store ke masing-masing field. Umumnya data disimpan di database , jadi bila menggunakan database tambahkan saja di file ajax.php script sql dan php untuk mengambil data dari database. Mudah bukan ?
Selamat mencoba !
Redirect ..
Mis saya punya file php dengan direktori sebagai berikut
Folder :include ->khusus tempat file untuk menampilkan
Folder :ACtion -> untuk insert update dan delete
Bagaimana saya meredirect pada saat saya submit dari satu form (include/myform.php) ke (action/myform.php) supaya kembali ke include/myform.php????
thank’s