Rabu, 28 Desember 2011

AJAX

AJAX (Asynchronous JavaScript and XML Application)

Ajax adalah teknologi gabungan dari JavaScript dan XML, untuk menambah interaktifitas suatu halaman web. JavaScript. JavaScript sebagai �bahasa pemrograman� yang bisa dijalankan di browser, dan XML sebagai sarana pendefinisian informasi dan strukturnya oleh pengguna sendiri. Contoh penggunaan Ajax antara lain pada situs yang selalu mengupdate tampilannya setiap saat (misalnya daftar comment di Facebook), jadi ada proses di latar belakang yang bekerja. Ajax memungkinkan koneksi dengan server tanpa memerlukan campur tangan pengguna.
Untuk menggunakan Ajax maka browsernya harus mendukung teknologi ini. Browser versi akhir umumnya sudah mendukung. Komponen yang digunakan untuk melakukan koneksi adalah Microsoft XMLHTTP atau XMLHTTP. Berikut contoh pengujian apakah komponen bisa digunakan di browser:
<SCRIPT>
var xmlHttp = buatObjekXmlHttp();

function buatObjekXmlHttp()
{
var obj = null;
if (window.ActiveXObject)
obj = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();

// Cek isi xmlHttp
if (obj == null)
document.write(
"Browser tidak mendukung XMLHttpRequest");
return obj;
}
</SCRIPT>
obj adalah variabel obyek dari kelas XMLHTTP. Nantinya obj digunakan untuk berhubungan dengan server. Obyek ini bisa meminta (request) suatu file di server, baik suatu script program atau file jenis lainnya. Berikut ini kodenya:
<SCRIPT>
function ambilData(sumber_data, id_elemen)
{
if (xmlHttp != null)
{
var obj = document.getElementById(id_elemen);
xmlHttp.open("GET", sumber_data, true);

xmlHttp.onreadystatechange = function ()
{
if (xmlHttp.readyState == 4 &&
xmlHttp.status == 200)
{
obj.innerHTML = xmlHttp.responseText;
}
}

xmlHttp.send(null);
}
}
</SCRIPT>
Pada function AmbilData, ada dua parameter: sumber_data dan id_elemen. Parameter sumber_data adalah nama file yang akan dibuka, dan id_elemen adalah suatu area di page tempat menampilkan output. Bila hasil koneksi dengan server untuk meminta file memberikan hasil (muncul event onreadystatechange), maka ada function yang dijalankan. Function itu memeriksa apakah properti readyState bernilai 4 (data dari server telah terunduh dengan lengkap) dan properti status bernilai 200 (server sudah melayani proses). Bila benar maka output dari server (dalam properti responseText) diberikan ke suatu area di page (melalui properti innerHTML).
Misal kedua function itu dimasukkan dalam suatu file dengan nama ajax.js. Script itu bisa di-include ke dalam file HTML. Berikut contoh kode HTML (misal bernama cobaajax.html) untuk menjalankan suatu file PHP dengan nama jam.php.
<html>
<head>
<title>Contoh Ajax dan PHP</title>
<script type="text/javascript" src="ajax.js">
</script>
</head>
<body>
<input type="button" value="Klik Saya"
onclick="ambilData('jam.php', 'id_info');" />
<div id="id_info">Kalau Anda mengklik tombol di atas
suatu info muncul di sini</div>
</body>
</html>
Isi file jam.php:
<?
$waktu=date("H:i:s");
echo "waktu sekarang adalah $waktu";
?>
Perhatikan bahwa tidak digunakan SUBMIT tetapi BUTTON karena proses submit diambil alih oleh function ambilData. Pesan �waktu sekarang� tidak ditampilkan secara langsung oleh script PHP, tetapi oleh script JavaScript. Jadi hasil eksekusi masih diolah dulu oleh function yang mengeksekusi file PHP tersebut.
Sekarang panggil file HTMLnya melalui http, maka hasilnya adalah sebagai berikut, sebelum dan sesudah button ditekan.


Untuk menangani hasil input komponen, caranya hampir sama juga. Perhatikan kode HTML berikut:
<HTML>
<BODY>
<script type="text/javascript" src="ajax.js"></script>
<script>
function prosesData(sumber_data, id_elemen)
{ var nama=document.getElementById("TXNAMA").value;
var url=sumber_data+"?nama="+nama;
ambilData(url, id_elemen);
}
</script>

<FORM NAME="ISIAN" METHOD="GET">
NAMA:
<INPUT TYPE="TEXT" NAME="TXNAMA" ID="TXNAMA"><P>
<INPUT TYPE="BUTTON" NAME="BTSUBMIT" VALUE="OK"
onclick="prosesData('proses.php', 'PESAN');">
</FORM>
<DIV ID="PESAN"></DIV>
</BODY>
</HTML>
Isi proses.php adalah sebagai berikut:
<?
header("Cache-Control: no-cache, must-revalidates");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

$nama=$_GET['nama'];
if ($nama=="")
{ echo "Kosong";
}
else
{ echo "Nama anda: $nama";
}
?>
Pada contoh kedua, pada saat penekanan button maka akan dipanggil function prosesData. Di dalam function prosesData diambil isian teks nama untuk dijadikan parameter pemanggilan file proses.php melalui function ambilData di ajax.js. Hasil echo tidak ditampilkan secara langsung ke layar tetapi diberikan ke function ambilData untuk ditampilkan di bagian yang telah ditentukan.
Dua baris pertama pada proses.php adalah untuk menghindari proses cache. Untuk menghemat koneksi, maka request yang sama biasanya diambilkan dari cache yang terletak di komputer client (bukan hasil eksekusi). Untuk aplikasi yang relatif statis hal ini tidak menjadi masalah, tetap untuk aplikasi yang berubah-ubah setiap saat (misalkan menampilkan jam) maka cache harus dihindari. Setiap informasi dalam cache memiliki batas waktu (expire), sehingga selain dinyatakan bahwa tidak menggunakan cache (no-cache), juga waktu expire diset supaya pada saat file dieksekusi cachenya menjadi kadaluarsa sehingga harus diambilkan dari server.

Akses Database
Sekarang akan dicoba memanfaatkan Ajax dalam melakukan akses database. Misal ada database dengan nama �INDONESIA� dan ada tabel dengan nama �KOTA� yang terdiri dari dua field PROPINSI dan KOTA dengan contoh instance sebagai berikut:
PROPINSI KOTA
Jawa Timur Malang
Jawa Timur Madiun
Jawa Timur Lumajang
Bali Denpasar
Bali Singaraja
Jawa Barat Bandung
Jawa Barat Sumedang
Jawa Barat Bogor
Selanjutnya dimiliki sebuah form dengan combo box yang berisi nama propinsi. Pada saat pengguna memilih propinsi, maka selanjutnya akan ditampilkan combo yang berisi kota yang sesuai di bawahnya. Berikut kode HTMLnya:
<HTML>
<BODY>
<script type="text/javascript" src="ajax.js">
</script>
<script>
function pilihKota()
{ var propinsi=document.getElementById("SelPropinsi").value;
var url="carikota.php?propinsi="+propinsi;
ambilData(url, "idSelKota");
}
</script>

<FORM NAME="ISIAN" METHOD="GET">
Propinsi:
<SELECT NAME="SelPropinsi" ID="SelPropinsi" onChange="pilihKota();">
<OPTION VALUE="Jawa Timur">Jawa Timur</OPTION>
<OPTION VALUE="Jawa Barat">Jawa Barat</OPTION>
<OPTION VALUE="Bali">Bali</OPTION>
</SELECT>
</FORM>
<P>
<DIV ID="idSelKota"></DIV>
</BODY>
</HTML>
Komponen SELECT memanfaatkan event onChange yang terjadi setiap user memilih isian SELECT, yang kemudian memanggil function pilihKota. Di dalam pilihKota disusun url untuk pemanggilan file carikota.php. Berikut isi file carikota.php:
<?
header("Cache-Control: no-cache, must-revalidates");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// ambil data
..$propinsi=$_GET['propinsi'];
..// buka koneksi dg mysql
..$koneksi=mysql_connect("localhost","root","") or die(mysql_error());
..// pilih database
..$database=mysql_select_db("INDONESIA",$koneksi) or die(mysql_error());
..// susun query
..$query="SELECT * FROM KOTA WHERE PROPINSI='$propinsi'";

..// eksekusi query
..$hasil=mysql_query($query) or die(mysql_error());
..// lain-lain

..if (mysql_num_rows($hasil)==0)
..{ echo "<B>Tidak ada kota yang sesuai!</B>";
..}
else
{ echo "Kota: <SELECT NAME='SelKota' ID='SelKota'>";
while ($data=mysql_fetch_array($hasil))
{ echo "<OPTION VALUE='$data[1]'>$data[1]</OPTION>";
}
echo "</SELECT>";
}
mysql_close($koneksi);
?>
Cara ini umum dilakukan pada beberapa situs yang menanyakan nama negara lalu diikuti nama propinsi atau kota, atau pada situs pendaftaran email yang secara otomatis memeriksa apakah username yang dipilih sudah ada yang memiliki atau tidak. Untuk data yang sedikit alternatifnya memang pencarian bisa dilakukan dalam JavaScript tetapi hal ini menyulitkan dalam update kode.
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)