Mari kita lanjut ke bagian ke dua….. Pada bagian pertama kita telah belajar tentang events yang bisa digunakan untuk mengeksekusi sebuah fungsi. Nah… pada bagian kedua ini, kita akan belajar bagaimana fungsi javascript itu berhubungan dengan server, tetapi melewai proses yang tidak keliatan atau background.
Rahasia pada AJAX… kenapa proses bisa dilakukan secara background.. slah satunya adalah dengan menggunakan obyek xmlhttprequest. Dan obyek itu telah terdapat pada browser-browser modern.
Yak… mari kita langsung saja menuju ke bagian fungsi javascript….. masih ingat kan pada koding-an kita yang pertama??…
ini sebagian kodingnya :
<a href=”#” onclick=”menu(1)”>Menu 1</a> <br/>
<a href=”#” onclick=”menu(2)”>Menu 2</a> <br/>
<a href=”#” onclick=”menu(3)”>Menu 3</a> <br/>
Pada koding diatas.. fungsi menu, akan dijalankan ketika link tersebut di-klik. karena events-nya onclick. dan… mari kita buat fungsi menu tersebut…..
eits…. tapi sebelum membuat sebuah fungsi javascript. kita buat dulu fungsi untuk mengecek apakah di browser yang kita gunakan telah terdapat obyek xmlhttprequest belom. mari kita buat dulu…..
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// ngecek buat browser firefox, opera 8.0+, safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// browser Internet Explorer
try
{
// IE 6.0+
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
// IE 5.0
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Penjelasan :
Skrip diatas pertama mendefinisikan variabel xmlhttp untuk menampung obyek xmlhtprequest. kemudian skrip akan membuat obyek dengan xmlhttp = new xmlhttprequest(). skrip ini akan bekerja pada browser Firefox, Opera, dan Safari. Jika gagal maka akan dibuat xmlhtp= new ActiveXobject(“Msxml2.XMLHTTP”). Lalu jika gagal akan membuat xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”) untuk IE versi 5.
wew…. udah panjang ya artikelnya…. mau lanjut??… lanjut aja ya kang??… sekarang kita buat fungsi javascriptnya…. maksudnya fungsi menu tadi.
function menu(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser tidak support HTTP Request")
}
var url="fetcher.php"
url=url+"?cmd=readartikel&q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChangedCenter
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
lalu untuk fungsi statechangedcenter nya……
function stateChangedCenter()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading")
{
document.getElementById("txtHint").innerHTML="Loading data....."
}
}
Yup… segitu dulu…. besok lanjut ke chapter berikutnya… yaitu penanganan dengan content nya….. Pamit dulu….
