Nah, untuk lebih memahami definisi ajax di atas, berikut contoh sederhana penggunaan aplikasi ajax.
Sebelumnya, anda harus menginstall web server, PHP, MySql. Aplikasi yang sudah lengkap dan bias digunakan adalah XAMPP, silahkan download di website resminya yang versi terbarunya xampp di www.xampp.com
Saya anggap pembaca sudah memahami cara instalasi xampp, jika belum silahkan googling aja.
Anggap, struktur webservernya seperti berikut :
Buat folder latihanajax di folder xampp di c:\xampp\htdocs\latihanajax
Nanti seluruh file latihan ada folder tersebut.
Buat file latsatu.html
<html>
<head>
<title>Latihan Satu AJAX</title>
<script type="text/javascript" src="latsatu.js"></script>
</head>
<body>
<table width="100%" align="center">
<tr>
<td align="center">
Coba anda tuliskan sebuah text pada form di bawah <br />
<input type="text" id="teksInput" onkeyup='proses()' />
<div id="hasilProses"></div>
</td>
</tr>
</table>
</body>
</html>
Buat file latsatu.js
<kode>
var xmlHttp = bikinXmlHttp();
function bikinXmlHttp() {
var xmlHttp;
if (window.ActiveXObject) {
try { //jika IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttp = false;
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp) {
alert("Gagal dalam membuat xmlHttpRequest Object");
} else {
return xmlHttp;
}
}
function proses() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
teks = encodeURIComponent(document.getElementById("teksInput").value);
xmlHttp.open("GET", "latsatu.php?teks="+teks, true);
xmlHttp.onreadystatechange = responServer;
xmlHttp.send(null);
} else {
setTimeout('proses',1000); //jika sibuk ulangi dalam 1 detik
}
}
function responServer() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
hasilTeks = xmlDocumentElement.firstChild.data;
document.getElementById("hasilProses").innerHTML = hasilTeks;
setTimeout('proses()',1000);
} else {
alert("Ada problem, method statusText adalah "+xmlHttp.statusText);
}
}
}
</kode>
Buat file latsatu.php
< ?php
header('Content-type:Text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
echo '<response>';
$teks = htmlentities($_GET[teks]);
if (!empty($teks)) {
echo 'Teks yang anda masukkan adalah : '.$teks;
} else {
echo 'Silahkan Masukkan teks pada kotak input di atas';
}
echo '</response>';
?>
Kalau sudah, silahkan buka web browser anda, pakai IE dan firefox
Ketikkan di url nya, http://localhost/latsatu.html
Maka hasilnya adalah sebagai berikut :
Jika kita memasukkan teks di form, otomatis teks tersebut akan dituliskan di bawahnya. Kenapa bisa begitu? Di bawah ini saya jelaskan keterangan programnya.
Keterangan listing program :
<kode>
Dokumen latsatu.html adalah file HTML standard
<script type="text/javascript" src="latsatu.js"></script>
Untuk memanggil javascript di file eksternal.
<input type="text" id="teksInput" onkeyup='proses()' />
Pada input di atas, kita definisikan onkeyup='proses()' yang artinya, jika pointer/cursor kita arahkan di dalam form maka akan memanggil fungsi javascript process(). Sedangkan id="teksInput" digunakan untuk menandai bahwa form ini mempunya id yang bernama teksInput.
<div id="hasilProses"></div>
Kita definisikan id="hasilProses" untuk menampilkan hasil dari fungsi proses().
</kode>
Dokumen latsatu.js
Membuat object xmlHttp untuk melakukan transaksi data, karena antara IE dan browser yang lain beda, maka kita definisikan variabel xmlHttp adalah sebuah fungsi yang mengecek apakah browser yang dipakai IE atau bukan.
Untuk IE, xmlHttp di definisikan oleh ActiveXObject(”Microsoft.XMLHTTP”) sedangkan untuk browser yang lain, xmlHttp di isi fungsi XMLHttpRequest().
<kode>
var xmlHttp = bikinXmlHttp();
function bikinXmlHttp() {
var xmlHttp;
if (window.ActiveXObject) {
try { //jika IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttp = false;
}
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
xmlHttp = false;
}
}
if (!xmlHttp) {
alert("Gagal dalam membuat xmlHttpRequest Object");
} else {
return xmlHttp;
}
}
</kode>
Setelah kita definisikan xmlHttp, kita bisa pakai object tersebut didalam fungsi yang lain. Fungsi proses() berisi xmlHttp.readyState, readyState adalah property dari xmlHttp, bisa bernilai 0-4, bernilai 4 berarti koneksi request sukses, yang berarti baris selanjutnya yang akan dieksekusi. Kita akan bahas detail tentang XMLHttpRequest di Bab selanjutnya.
Kemudian pada baris 3, pengambilan nilai dari dokumen dengan id “teksInput” yang tidak lain adalah input teks pada latsatu.html, kita namai nilai dari form itu sebagai variabel “teks”.
Properti onreadystatechange adalah untuk meminta respon server, yang akan di definisikan pada fungsi di bawahnya. Sedangkan setTimeout adalah fungsi javascript untuk mengulang dalam waktu 1 detik jika server sibuk.
<kode>
function proses() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
teks = encodeURIComponent(document.getElementById("teksInput").value);
xmlHttp.open("GET", "latsatu.php?teks="+teks, true);
xmlHttp.onreadystatechange = responServer;
xmlHttp.send(null);
} else {
setTimeout('proses()',1000); //jika sibuk ulangi dalam 1 detik
}
}
</kode>
Fungsi respon server di minta oleh fungsi proses(), readyState = 4 jika proses yang dilakukan object telah selesai dan properti status = 200 adalah respon akan mengembalikan nilai OK karena dokumen ditemukan pada waktu request.
responseXML merupakan property untuk mengembalikan respon dalam format XML
documentElement digunakan untuk mengambil root element pada dokumen XML
firstChild.data untuk mengambil nilai pada element
pada baris 7 id “hasilProses” pada dokumen HTML akan diberi nilai hasilTeks yang merupakan nilai dari dokumen XML.
<kode>
function responServer() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
hasilTeks = xmlDocumentElement.firstChild.data;
document.getElementById("hasilProses").innerHTML = hasilTeks;
setTimeout('proses()',1000);
} else {
alert("Ada problem, method statusText adalah "+xmlHttp.statusText);
}
}
}
</kode>
Kode di atas hanyalah salah satu contoh sederhana penggunaan konsep ajax, jika anda masih bingung adalah wajar karena penjelasan masing2 ada di bab selanjutnya.
Juli 7th, 2008 at 20:52
duh saya masih bingung !! saya ada tugas bikin web pk ajax!!makenya juga xampp!! saya baru buat script phpnya.
punya contoh aplikasi ajax yang udah diaplikasiin ke web e-commerce ga!! tolong dikirim ke email saya ya kalo ada…
Trim’s
Juli 7th, 2008 at 22:59
Hmm… mungkin anda dapat mempelajari ini dulu
http://rapidshare.com/files/91712647/Beginning_AJAX_with_PHP5.rar
untuk dapat membuat web ecommerce dengan ajax saya rasa Ebook di atas sudah OK.
Nah kalo utk di integrasikan ke CMS yang sudah ada, drupal, joomla Ecommerce, sudah ada tuh…
Juli 23rd, 2008 at 11:14
passwordnya mas????
Juli 23rd, 2008 at 14:20
oh ya, password nya http://www.softarchive.net
Juli 31st, 2008 at 16:10
ada tutorial asp.net 2, untuk bikin web sekolah gitu
September 5th, 2008 at 06:36
ajax bisa dipake di wordpress.com ga yee?
September 8th, 2008 at 07:02
mas password nya kok gak bisa
http://rapidshare.com/files/91712647/Beginning_AJAX_with_PHP5.rar
saya dah download tp kok gak bisa dipakai ya passwordnya
tolong dong passwordnya
September 8th, 2008 at 13:08
password nya http://www.softarchive.net, ga pake http://
Coba deh.. ato entar q uploadin aja ya…
Oktober 6th, 2008 at 14:03
thank’s
Oktober 13th, 2008 at 20:17
hmmm bro
passnya http://www.softarchive.net kan? ga bisa bro…
Oktober 21st, 2008 at 13:41
ms.bisa buatin program yang seminim mungkin buat saya pelajari
Oktober 28th, 2008 at 13:30
mas bisa bikin progam yang lain yang bisa saya pelajari nnti kirim kee-mail q yaww
Nopember 17th, 2008 at 07:06
bozz punya contoh aplikasi yang udah diaplikasiin ke web e-commerce??? tolong dikirim ke email saya ya kalo ada…soalx aq lgi dah tgas bkin web e-commerce niehh =(
thanks b4 bos
Mei 18th, 2009 at 11:45
Kalo ngasih tutorial jangan tanggung2, pake dipassword lagi. udah download capek2 pake password. Bikin kesel ajah!!!!!!!!!!!!!!!!!!!!!
Agustus 11th, 2009 at 09:25
saya ada tugas bikin web service menggunakan ajax, udah make xampp!! saya sudah buat sample phpnya..tapi masih wam bangt denga ajax
ada contoh aplikasi ajax yang udah diaplikasiin ke web service ga?? tolong dikirim ke email saya ya kalo ada…
mohon pencerrahannya
terimakasih banyak
September 10th, 2009 at 23:33
passnya http://www.your-ebook-free.info
Maret 6th, 2010 at 04:27
klo saya kasusnya gini om…
saya punya database mysql di web hosting trus saya juga punya database di localhost komputer rumah….
nah bisa ga klo isi database di web hosting dipindahin / dikirim ke database mysql di loclhost saya secara berkala pake ajax…??
klo ga sisa kira2 pake metode apa ya..??
mksih…
April 3rd, 2010 at 10:25
klo database di export dulu lalu di import
Mei 12th, 2010 at 16:58
salm kenal pak ajax
wah saya mohon bantuannya dunkkk pak ajax
saya nih punya data yang isinya Nama, Alamat, No. HP, Daftar Harga, Merk Mobil
nah yang mau saya tanyakan gmana cara nya buat isi dari Daftar Harga otomatis Keluar Merk Mobilnya Pak…….
mhon dunkkkk bantuan nya bapak
bls ke email saya ya Pak
trim’s