Apa Sih Ajax?
Ajax secara sederhana didefinisikan sebagai penggunaan Javascript untuk melakukan request ke server dan melakukan update bagian-bagian tertentu sehingga tidak perlu melakukan load satu halaman penuh. Pengertian Ajax awalnya adalah 'Asynchronous Java and XML', tetapi pada prakteknya kadang tidak memakai XML, tetapi menampilkan halaman yang diinginkan apa adanya.
Ajax secara sederhana didefinisikan sebagai penggunaan Javascript untuk melakukan request ke server dan melakukan update bagian-bagian tertentu sehingga tidak perlu melakukan load satu halaman penuh. Pengertian Ajax awalnya adalah 'Asynchronous Java and XML', tetapi pada prakteknya kadang tidak memakai XML, tetapi menampilkan halaman yang diinginkan apa adanya.
Plus:
lebih interaktif, cepat
Minus:
perlu kehati-hatian dalam pengembangan (keamanan), tidak boleh melakukan refresh halaman (akan kembali ke halaman awal)
Perhatian:
Javascript di halaman Ajax tidak bisa dimanipulasi di halaman request, begitu sebaliknya. Karena halaman Ajax diproses di klien dan halaman request diproses di server. Satu-satunya cara adalah passing parameter melalui POST atau GET atau SESSION
Sintaks
function createRequestObject()
{
var httprequest=false
if (window.XMLHttpRequest)
{
httprequest=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
try
{
httprequest=new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e)
{
try
{
httprequest=new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e)
{
}
}
}
return httprequest
}
function implementAjax()
{
var x = createRequestObject()
x.onreadystatechange = function()
{
if(x.readyState == 4)
{
........................................................................... letak kode untuk manipulasi halaman
}
}
x.open('get', url)
x.send(null)
}
Implementasi
index.php:
<?
ob_start("ob_gzhandler");
session_start();
$_SESSION[tes] = 10;
?>
<html>
<head>
<title>Tes AJAX GET & POST feat MANAJEMEN SESSION</title>
<style>
a.fakelink
{ color:#0000FF;
border:1px solid gray;
background:#FFFFFF;
}
a.fakelink:hover
{ background:#0000FF;
color:#FFFFFF;
border:1px solid gray;
}
#header
{
position:relative;
top:0;
left:0;
right:0;
height:80px;
width:100%;
background:#99FF99;
font-weight:bold;
font-size:18px;
}
#menu
{
width:100%;
border-top:1px solid silver;
border-bottom:1px solid silver;
background-color: #E7E7E7;
}
#sub_menu
{
background:#FF0000;
padding-left:10px;
}
#view
{
font-weight:bold;
}
#tombol
{
width:100px;
height:50px
}
</style>
<script language="Javascript">
function createRequestObject()
{
var httprequest=false
if (window.XMLHttpRequest)
{
httprequest=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
try
{
httprequest=new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e)
{
try
{
httprequest=new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e)
{
}
}
}
return httprequest
}
function implementAjaxGet(namaelemen, url)
{
var x = createRequestObject()
x.onreadystatechange = function()
{
if(x.readyState == 4)
{
var response=x.responseText.split("ini adalah nilai sesi tes")
document.getElementById(namaelemen).innerHTML=response[0]
document.getElementById("xcheck").innerHTML=response[1]
}
}
x.open('get', url)
x.send(null)
}
function implementAjaxPost(namaelemen, url, parameters)
{
var i
var params=""
var x = createRequestObject()
x.onreadystatechange = function()
{
if(x.readyState == 4)
{
var response=x.responseText.split("ini adalah nilai sesi tes")
document.getElementById(namaelemen).innerHTML=response[0]
document.getElementById("xcheck").innerHTML=response[1]
}
}
x.open('post', url)
params = params + parameters[i] + "=" + document.getElementById(parameters[i]).value
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
x.setRequestHeader("Content-length", params.length)
x.setRequestHeader("Connection", "close")
x.send(encodeURI(params))
}
function implementAjaxPosts(namaelemen, url, parameters)
{
var i
var params=""
var x = createRequestObject()
x.onreadystatechange = function()
{
if(x.readyState == 4)
{
var response=x.responseText.split("ini adalah nilai sesi tes")
document.getElementById(namaelemen).innerHTML=response[0]
document.getElementById("xcheck").innerHTML=response[1]
}
}
x.open('post', url)
parameters = parameters.split(",")
for (i=0; i < parameters.length-1; i++)
params = params + parameters[i] + "=" + document.getElementById(parameters[i]).value + "&"
if (parameters.length > 0) params = params + parameters[parameters.length-1] + "=" + document.getElementById(parameters[parameters.length-1]).value
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
x.setRequestHeader("Content-length", params.length)
x.setRequestHeader("Connection", "close")
x.send(encodeURI(params))
}
</script>
</head>
<body>
<div id="header">Ini adalah WebSite untuk mencoba Ajax<br/>Jangan melakukan refresh atau back</div>
<div id="menu">Menu</div>
<div id="sub_menu"><a class="fakelink" onClick="implementAjaxGet('view', 'tes1.php')">Sub Menu Tes Ajax Get</a></div>
<div id="form">Ini seharusnya untuk form</div>
<div id="view">Ini adalah view</div>
<div id="footer">Nilai Sesi 'Tes' mula-mula: <?=$_SESSION[tes]?></div>
<div id="xcheck"><?=$_SESSION[tes]?></div>
</body>
</html>
<?
ob_end_flush();
ob_end_clean();
?>
tes1.php:
<?
ob_start("ob_gzhandler");
session_start();
$_SESSION[tes] = 20;
?>
Ini adalah halaman tes1.php<br/>
Tes Ajax GET berhasil dilakukan<br/>
Sekarang adalah Tes Ajax Post<br/>
<form id="myform">
<input type="text" id="coba" value="hore" />
<input type="textarea" id="coba2" value="hore2" />
<input class="tombol" type="button" onClick="implementAjaxPost('view', 'tes2.php', 'coba,coba2')" value="Kirim Data" />
</form>
<br/><a class="fakelink">Tes CSS ini menggunakan css yang ada di 'index.php'</a>
<br/>Nilai Sesi 'Tes' diubah nilainya menjadi 20
ini adalah nilai sesi tes<?=$_SESSION[tes]?>
<?
ob_end_flush();
ob_end_clean();
?>
tes2.php
<?
ob_start("ob_gzhandler");
session_start();
echo "Ini adalah halaman tes2.php<br/>";
echo "Tes Ajax POST berhasil dilakukan<br/>Ini adalah hasilnya: ".$_REQUEST[coba]." ".$_REQUEST[coba2];
echo "<br/>Seharusnya nilai sesi 'tes' sekarang adalah 20. Tes=".$_SESSION[tes];
?>
ini adalah nilai sesi tes<?=$_SESSION[tes]?>
<?
ob_end_flush();
ob_end_clean();
?>
Ajax diimplementasiakan pada halaman 'index.php', yaitu akan mengubah isi dari DIV 'view' dan DIV 'xcheck' tanpa melakukan load halaman. Silakan dicoba dan dipahami sendiri. Kalau mau berbaik hati, silakan berikan penjelasan pada komentar.
Tapi saya akan menjelaskan trik:
"Cara mengubah dua komponen sekaligus"
adalah tidak mungkin mengubah halaman Ajax jika dilakukan di halaman request, misal di halaman 'tes.php' diberikan kode:
document.getElementById("xcheck").innerHTML=<?=_SESSION[tes]?>
mengapa? Karena seperti yang saya peringatkan tadi, bahwa tidak mungkin halaman request akan merubah halaman Ajax, karena yang satu diproses di server, sedangkan yang lain diproses di klien.
terus bagaimana caranya?
simpel, buat satu kata kunci di halaman request untuk pemisah yang nantinya akan digunakan di halaman Ajax, misalnya: 'ini adalah nilai sesi tes'. Di halaman Ajax, response dibuat menjadi array dengan pemisah yang telah ditentukan tadi, yaitu: 'ini adalah nilai sesi tes'. Elemen array indeks ke 0 untuk DIV 'view' dan elemen array indeks ke 1 untuk DIV 'xcheck'
Selamat bereksperimen
3 komentar:
You are mistaken. I can prove it.
All can be
Posting Komentar