AJAX - acara onreadystatechange
acara onreadystatechange
Apabila permintaan dihantar ke pelayan, kami perlu melaksanakan beberapa tugas berasaskan respons.
Apabila readyState berubah, acara onreadystatechange akan dicetuskan.
atribut readyState menyimpan maklumat status XMLHttpRequest.
Berikut ialah tiga atribut penting objek XMLHttpRequest:
| Atribut | Penerangan | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| onreadystatechange | Fungsi storan (atau Nama fungsi), fungsi ini akan dipanggil apabila sifat readyState berubah. | ||||||||
| readyState |
| ||||||||
| status | 200 : "OK" 404: Halaman Tidak Ditemui |
Apabila readyState bersamaan dengan 4 dan statusnya ialah 200, ini bermakna respons sedia:
Instance<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
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=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/asset/demo.ajax.php?dm=txt&act=getfruits",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通過 AJAX 改變內(nèi)容</button>
</body>
</html>Nota : onreadystatechange Peristiwa dicetuskan 5 kali (0 - 4), sepadan dengan setiap perubahan dalam readyState.
Menggunakan fungsi panggil balik
Fungsi panggil balik ialah fungsi yang dihantar sebagai parameter kepada fungsi lain. Jika anda mempunyai berbilang tugas AJAX di tapak anda, anda harus menulis fungsi
standard<head>
<script type="text/javascript">
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("/asset/demo.ajax.php?dm=txt&act=getfruits",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()">通過 AJAX 改變內(nèi)容</button>
</body>
</html> 
