Mengapa
Harus Ajax ???
Pada website
tradisional biasa jika kita mengklik suatu tombol/link tertentu maka browser
akan melakukan refres dimana document HTML akan di baca dari awal dan layar
browser akan menjadi blank sesaat karena pada saat itu browesr sedang
meminta/merequest data dari web server dan hal itulah yang membuat aplikasi
website menjadi kurang interaktif dan responsif. AJAX digunakan untuk
memecahkan masalah tersebut,AJAX membuat aplikasi web menjadi lebih interaktif
dan responsif serta memiliki kecepatan dalam memproses request ke server. Sedah
menjadi teknologi yang wajib diterapkan bagi website-website moderen (web 2.0)
Asal
Mula Bahasa Pemograman AJAX
AJAX memiliki
kepanjangan asynchronous javascript and XML merupakan suatu teknik baru dalam
dunia web tapi bukan merupakan bahasa pemograman yang baru. Dikembangkan sekitar
2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programer. Dengan
adanya AJAX,akses data ke server yang dikirim melalui client via web dapat
lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu
melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX
dapat diintegrasikan dengan server side programming seperti PHP,ASP,JSP dll. Perhatikan
mekanisme proses ajax menggunakan PHP berikut ini :
Pada mekanisme di
atas,proses berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui javascript. Selanjutnya server
akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon
dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk
diolah oleh javascript. Hasil olahan javascript tersebut akhirnya akan
ditampilkan di web client sebagai output tanpa harus merefresh halaman web. Bandingkan
dengan mekanisme biasa dalam menjalankan PHP seperti yang ditunjukkan pada
gambar berikut :
Pada mekanisme
biasa,respon yang dihasilkan oleh server HTML yang mengakibatkan halaman web
akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini tentu kurang
sekali. Sedangkan kekurangannya AJAX dibandingkan mekanisme biasa adalah
memiliki tingkat kesukaran pemograman yang lebih tinggi, karena programer harus
menguasai 4 hal yaitu HTML-(XHTML),Javascript, XML dan juga server side
programing seperti PHP dan lain sebagainya.
Karakteristik
:
- sebuah halaman web tidak perl di-refresh setiap kali ada data baru yang ingin ditampilkan. Dengan demikian, sebuah aplikasi web akan terasa seperti aplikasi desktop saja.
- kecepatan, interaktivis, fungsionalitas, dan tingkat kegunaan halaman web akan meningkat.
- AJAX bekerja mengambil data dari server, user yang membuka halaman web masih tetap bisa berinteraksi dengan alaman web tersebut, di mana halaman web tidak mengalami freezing seperti halnya aplikasi web konvensional.
- bersifat asynchronous artinya permintaan data tambahan dari server dan loadingnya dilakukan di background tanpa mempengaruhi tampilan dan sifat halaman web sekarang.
- Ajax memiliki struktur pemrograman yang lebih mudah untuk dipahami.
f. Melakukan request ke web server dan PHP yang berada di
server akan melakukan apa yang diminta olehAjax, mengirim hasilnya ke web
browser dan Ajax menampilkannya kepada user.
Contoh script koneksi.php
<?php
$Host='localhost';
$User='root';
$Pass='';
$Database='data_perusahaan';
$db = mysql_connect("$Host", "$User", "$Pass") or die ("gagal: " . mysql_error());
mysql_select_db("$Database", $db) or die ("data_salah: " . mysql_error());
?>
Script di atas sebagai mengkoneksikan denagn database yang di buat seperti yang saya buat dengan nama database data_perusahaan dengan 2 tabel yaitu harga_pengiriman dan cek_pengiriman yang memiliki beberapa atribut di dalam field nya.
Contoh script index.php
<?php
include("koneksi.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Data Perusahaan</title>
<script src="select.js"></script>
</head>
<body bgcolor="gray">
<td><h3>Pilih Harga Dari Tiap Kota :<font style="italic"></td></h3>
<select name="cek_pengiriman" onChange="showData_cek(this.value)">
<option></option>
<?php
$query="select * from harga_pengiriman";
$rs = mysql_query($query);
while($result_data = mysql_fetch_array($rs)){
list($id_kota, $kota)=$result_data;
?>
<option value="<?php echo "$id_kota"?>"><?php echo "$kota"?></option>
<?php
}
?>
</select>
<br/><br/>
<div id="txtHint"></div>
</body>
</html>
Script di atas menampilkan harga dari tiap kota apabila akan melakukan pengiriman dari tiap kota yang akan di tuju contohnya jika kota yang di pilih adalah kota Jember-Lumajang maka akan tampil seperti gambar berikut :
Contoh scrpit get.php
<?php
$q = $_GET["q"];
include("koneksi.php");
$sql = "SELECT * FROM cek_pengiriman WHERE id_kota = '".$q."'";
$result = mysql_query($sql);
$sql_b = "SELECT * FROM harga_pengiriman WHERE id_kota = '".$q."'";
$result_b = mysql_query($sql_b);
$row_b = mysql_fetch_assoc($result_b);
?>
<tr>Harga Pengiriman : <b/><?php echo strtoupper ($row_b['kota'])?> </b></tr>
<?php
echo "<table bgcolor='gray' border='5'>
<tr>
<td><b>Id Cek</td></b>
<td><b>Data Cek</td></b>
</tr>";
while($row = mysql_fetch_array($result)){
echo "<tr>";
echo "<td><b>" . $row['id_cek'] . "</td></b>";
echo "<td><b>" . $row['data_cek'] . "</td></b>";
echo "</tr>";
}
echo "</table>";
?>
Script di atas menampilkan harga pengiriman jika pilihan harga tiap kota dipilih dengan yang di butuhkan maka akan tampil gambar sebagai berikut :
misal harga pengiriman tiap kota yang dipilih adalah Jember-Lumajang maka harga pengiriman Jember-Lumajang akan tampil seperti gambar di bawah ini.
Contoh script select.js
var xmlHttp
function showCek_pengiriman(str){
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null){
alert("Browser anda tidak support")
return
}
var url="get.php"
url=url+"?q="+str
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged(){
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject(){
var xmlHttp=null;
try{
xmlHttp=new XMLHttpRequest();
}catch(e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function showCek_pengiriman(str){
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null){
alert("Browser anda tidak support")
return
}
var url="get.php"
url=url+"?q="+str
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged(){
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject(){
var xmlHttp=null;
try{
xmlHttp=new XMLHttpRequest();
}catch(e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
Demikian contoh script dari AJAX,Semoga bermanfaat !!!!
