Archive for September, 2007

06
Sep
07

Learn ajax _1

It’s ’bout start 2 learn ajax.

code di bawah, merupakan fungsi untuk membuat object dari XMLHttpRequest, yang akan di pakai untuk berkomunikasi dengan server, mengirim dan menerima data dari server tanpa perlu reload page:

<script typ=”text/javascript”>

function createXMLHttpRequestObj() {
var xmlHttp = false;
try{
//For Firefox, Opera 8.0+, safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
//Internet explorer
try {

//IE 6.0

xmlHttp = ActiveXObject(“Msxml2.XMLHTTP”);
} catch (E) {
try {

//IE 5.5+

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (Ex) {
alert(“Your browser does’t support ajax”);
return false;
}
}
}
}

</script>

Sebelum mengirim data ada 3 properties dari object xmlHttpRequest yang perlu diperhatikan:

1. onreadystatechange Propery

Setelah melakukan request terhadap server nantinya qta butuh fungsi yang akan menerima response dari server, onreadystatechange property nantinya akan menyimpan fungsi yang memproses kembalian dari server

xmlHttp.onreadystatechange = function() {

//write code here

}

2. readyState Property

Property yang menyimpan status response dari server. Berikut nilai dari readyState

State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete

xmlHttp.onreadystatechange = function() {

if(xmlHttp.readyState==4) {

//Get data dari respon server

}

}

3. responseText Property

xmlHttp.onreadystatechange = function() {

xmlHttp.open(<GET/POST>, <server_page_requested>, <true/false>);

if(xmlHttp.readyState==4) {

document.getElementById(/*element id here*/).innerHTML = xmlHttp.responseText;

}

}

* <GET/POST> = method yang di pakai untuk mengirim request ke server

* <server_page_requested> = script/page yang akan diload/request

* <true/false> = apakah request akan ditangani secara asyncronous

smile_1.jpg

Advertisements