Respon Server
Untuk mendapatkan respon dari server, kita dapat menggunakan responeText atau responeXML. Sekedar penjelasan, responText berarti kita menerima balasan dari server dalam bentuk text, sedangkan responeXML berarti kita menerima balasan dari server dalam bentuk data XML. Silahkan kalian pilih dengan bijak yang mana yang akan kalian gunakan.Menggunakan ResponeText
Jika balasan dari server berupa teks dan bukan data XML, maka gunakan responeText. ResponeText akan mengembalikan bentuk data dari server menjadi teks. Seperti yang saya gunakan pada contoh di part pertama.
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Menggunakan ResponeXML
Jika balasan dari server bukan berupa teks dan kalian ingin menguraikannya menjadi XML, maka gunakan responeXML. Sebagai contoh, kita akan menggunakan contoh yang sudah ada di w3schools.com. yaitu menggunakan data xml cd_catalog.xml dan kode html :
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(){
var xmlhttp;
var txt,x,i;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html> Event onreadystatechange
Ketika perminataan ke server dikirim, kita bisa melakukan beberapa tindakan berdasarkan respon dari server.Event onreadystatechange akan ter-eksekusi setiap ada perubahan readyState.
Properti readyState itu membawa status dari XMLHttpRequest.
| Properti | Deskripsi |
| onreadystatechange | Sebuah fungsi yang otomatis akan terpanggil tiap kali property readyState berubah |
| readyState | Pemegang status dari XMLHttpRequest, Berubah dari 0 sampai 4 |
| 0 : Request di-inisialisasikan | |
| 1 : Koneksi ke server didirikan | |
| 2 : Permintaan diterima server | |
| 3 : Permintaan diproses server | |
| 4 : Permintaan telah diterima dan respon siap | |
| Status | 200 : OK |
| 404 : PNF(Page Not Found) |
Note : event onreadystatechange dieksekusi sebanyak lima kali (0-4), yaitu setiap perubahan pada readyState.xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
Callback
Callback adalah fungsi yang menyalurkan parameter ke fungsi lain.Jika kita memiliki lebih dari satu tugas AJAX di website kita, maka kita harus membuat satu fungsi standar untuk menciptakan objek XMLHttpRequest, dan memanggilnya untuk setiap tugas AJAX.
Fungsi yang dipanggil harus berisi URL dan apa yang harus dilakukan pada onreadystatechange (yang mungkin berbeda untuk setiap panggilan). Ini tentunya sangat berguna untuk menyingkat waktu penulisan code bukan?
Sekian untuk hari ini. Tapi, untuk kalian yang belum memahami tentang callback bisa melihat contoh callack dari www.w3schools.com ini :
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>
Semoga bermanfaat.
Kali ini gak ada contoh yang bisa di-download lagi.
Tidak ada komentar:
Posting Komentar