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
Recent Comments