My First AJAX
Menindaklanjuti artikel yang dulu tentang ajax, sekerang saya akan take action, kita akan langsung terjurn ke ajax code. Tapi sebelum itu, jika belum membaca postingan saya sebelumnya, bisa dibaca disini dan disini, ini penting loh, karena belajar ajax tanpa dasar hasilnya tidak akan sesuai dengan tujuan ajax, he he
Kita akan membuat aplikasi kecil yang memanfaatkan ajax, dengan aplikasi tersebut, kita akan mengirimkan string ke server malalui 2 method post dan get. Siapkan editor kesayangan anda, kopi, winamp dan jangan lupa berdoa. Sebagai informasi sedikit, saya menggunakan editor notepad++ versi 4.x, bukan yang edisi portable. Jika kepingin, bisa download disini. Kita lanjutkan misinya. Siapakan 2 buah file 1 HTML dan 1 PHP.
- File HTML digunakan untuk membuat mesin ajax, membangun form dan link
- File PHP digunakan sebagai prosesing, bisa dihubungkan dengan database atau sebagai service. (keren kan?)
Pada file HTML tuliskan kode sebagai berikut
<html>
<head>
<script language=”javascript”>
var x;
function create(){
if (window.XMLHttpRequest){
x = new XMLHttpRequest();
}
else if (window.ActiveXObject){
try{
x= new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch(fsd){
try {
x=new ActiveXObject(”Msxml2.XMLHTTP”);
}catch(das){}
}
}
return x;
}
function kirim(url){
create();
x.open(”get”,url,true);
x.onreadystatechange=update;
x.send(null);
}
function pos(url,frm) {
var obj=document.getElementById(frm);
var str=”;
for (var i=0; i<obj.length-1;i++){
if (str.length) str +=’&’;
str +=obj.elements[i].name+’='+encodeURI(obj.elements[i].value);
}
x.open(”post”,url,true);
x.setRequestHeader(”Content-Type”, “application/x-www-form-urlencoded”);
x.setRequestHeader(”Content-length”, str.length);
x.setRequestHeader(”Connection”, “close”);
x.onreadystatechange=update;
x.send(str);
}
function update(){
if (x.readyState==4){
document.getElementById(’container’).innerHTML=x.responseText;
}
else{
document.getElementById(’container’).innerHTML=’Sedang loading…’;
}
}
</script>
</head>
<body onLoad=”create();”>
<a href=”javascript:kirim(’prc.php?kalimat=kalimat ini akan menjadi hurufkapital’)”>kalimat ini akan menjadi huruf kapital</a>
<div d=”container” style=”border:1px solid red; padding:5px; margin:5px;”>
Disinii Respon akan diterima
</div>
<form id=”myFrm”>
<input type=”text” name=”kalimat” />
<input type=”button” onClick=”pos(’prc.php’,'myFrm’)” value=”Kirim” />
</form>
</body>
</html>
sedang pada file PHP, yang mana hanya sebagai prosesing, tuliskan sebagai berikut
<?php
if (isset($_GET[”kalimat”])){
$kalimat=$_GET[”kalimat”];
echo strtoupper($kalimat);
}
elseif (isset($_POST[”kalimat”])){
$kalimat=$_POST[”kalimat”];
echo strtoupper($kalimat);
}
?>
letekkan 2 file tadi dalam 1 folder, kemudian jalankan browser anda, arahkan ke file HTML, selamat anda sudah berhasil membuat aplikasi ajax untuk pertama kalinya secara mudah dan cepat he he.
Anda masih bisa mengembangkan aplikasi ini, misalkan dengan menghubungkan file php tadi dengan databse, sehingga bisa menyimpan dan membaca tabel di dalam database. Intinya kalau ingin aplikasi ajax anda berjalan lebih powefull dan interative, KREATIF LAH.
Anda bisa mendownload file source tadi disini
Jika anda memiliki pertanyaan atau kesulitan dengan artikel ini, bisa contak saya melalui ym atau melalui sms.
Related Post
Filled in category Ajax, Tutorial
[…] tutorial ajax yang lalu, tetapi kali bukan fokus pada ajax itu sendiri, tapi bagaimana membuat tampilan user interface buat […]
[…] banyak, misalkan menginstall wordpress, membangun situs iklan baris menggunkan wordpress dan membangun aplikasi web dengan AJAX. And […]
ni dia nih artikel seru
mana sambungannya? belajar dasar2 ajax, bingung deh baca webnya…………….