AjaX adalah Asynchronous JavaScript and XMLHTTP. Ajax
yaitu suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web
interaktif, tujuannya adalah untuk memindahkan sebagian besar interaksi pada
komputer web server melakukan pertukaran data dengan server di belakang layar,
sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali
seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas,
kecepatan, dan usability. Dalam menciptakan satu Wet yang interaktif Ajax
merupakan kombinasi dari:
DOM yang diakses dengan client side scripting language, seperti
VBScript dan implementasi ECMAScript seperti JavaScript dan JScript, untuk
menampilkan secara dinamis dan berinteraksi dengan informasi yang
ditampilkan
Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di
implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan
pertukaran data asinkronus dengan web server. Pada beberapa framework
AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP atau
XMLHttpRequest untuk melakukan pertukaran data dengan web server.
XML umumnya digunakan sebagai dokumen transfer, walaupun format lain
juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam
pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai
DOM
JSON dapat menjadi pilihan alternatif sebagai dokumen transfer,
mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih
mudah
Dari latihan yang sudah dikerjakan oleh saya
yaitu :
Buatlah
satu database terlebih dahulu kurang
lebihnya seperti ini dambarannya : 
Kemudian buat file dengan nama get_order.php
Scpipx dibawah ini
<textarea cols="70" name="mytextarea" readonly="" rows="20"><html>
<head> <title>Kalkulator</title></head>
<body>
<head> <title>Kalkulator</title></head>
<body>
<?php
$q =
$_GET["list"];
include("koneksi.php");
$sql =
" SELECT * FROM perlengkapan WHERE id_kategori ='".$q."'";
$result
= mysql_query ($sql);
$sql2 =
" SELECT * FROM kategori WHERE id_kategori ='".$q."'";
$result2
= mysql_query ($sql2);
$row2 =
mysql_fetch_assoc ($result2);
?>
Kategori: <br><?php echo strtoupper
($row2['kategori']) ?> </br>
<?php
echo
"<table border='1'>
<tr>
<th>ID
Perlengkapan </th>
<th>Daftar
Perlengkapan</th>
<th>Jumlah
perlengkapan</th>
</tr>";
while
($row = mysql_fetch_array($result)){
echo
"<tr>";
echo
"<td>" .$row['id_perlengkapan'] . "</td>";
echo
"<td>" .$row['isi_lengkap'] . "</td>";
echo
"<td>" .$row['jml_order'] . "</td>";
echo
"</tr>";
}
echo
"</table>";
?>
</textarea>
save kode diatas dengan nama get_order.php
Kemudian buat lagi file index.php
Script dibawah ini.
<textarea cols="70" name="mytextarea" readonly="" rows="20"><html>
<head> <title>Kalkulator</title></head>
<body>
<head> <title>Kalkulator</title></head>
<body>
<?php
include ("koneksi.php");
?>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title> simple projek ajax</title>
<script src="selectorder.js"></script>
</head>
<body>
Pilih Kategori :
<select name="kategori"
onChange="showKategori(this.value)">
<option></option>
<?php
$query="select
* from kategori";
$rs
= mysql_query($query);
while($result_data
= mysql_fetch_array($rs)){
list($id_kategori,
$kategori)=$result_data;
?>
<option
value="<?php echo "$id_kategori"?>"><?php echo
"$kategori"?> </option>
<?php
}
?>
</select>
<br/><br/>
<div
id="txtHint"></div>
</body>
</html>
</tetxarea>
Kemudian buat
"koneksi.php" script dibawah ini tanpa tanda kutip kemudian di save
<head> <title>Kalkulator</title></head>
<body>
<?php
//set the database connection variabel
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
$dbDatabase = "pert9";
//connection to the database
$db = mysql_connect("$dbHost",
"$dbUser", "$dbPass") or die (" I cannot connect to
database because: " .mysql_error());
mysql_select_db("$dbDatabase", $db) or die ("
I cannott select the database: '$dbname' because: " .mysql_error());
?>
</textarea>
Sesuaikan nama tabel dan database yang sudah dibuat
sebelumnya agar bisa terkoneksi dengan baik.
Kemudian buat file selectorder.js ini adalah file jAva script
<textarea cols="70" name="mytextarea" readonly="" rows="20"><html>
<head> <title>Kalkulator</title></head>
<body>
<head> <title>Kalkulator</title></head>
<body>
return
}
var
url ="get_order.php"
url=url+"?q="+str
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function
stateChanged(){
if
(xmlHttp.readyState==4 || xmlHttp.readyState=="complate"){
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function
GetXmlHttpObject(){
var
xmlHttp=null;
try{
xmlHttp=new
XMLHttpRequest();
}catch
(e){
xmlHttp=new
ActiveXObject ("Microsoft.XMLHTTP");
}
return
xmlHttp;
}
</textarea>
Setelah itu panggil di
local Host /gaet_order.php dan
tambahkan dibelakangnya “ ?list=1 “ tanpa tanda Kitt sehingga seperti ini get_order.php?list=1
maka akan tampil seperti berikut sesuai dengan isi database yang sudah dibuat
rubahlah angka 1 sesuai dengan id kategori yang sudah dibuat
<<><><><><><><><><><><><SELAMAT MENCOBA><><><><><><><><><><><><><>
Post a Comment