onreadystatechange event
When a request is sent to the server, we need to perform some response-based tasks.
Whenever readyState changes, the onreadystatechange event will be triggered.
The readyState attribute stores the status information of XMLHttpRequest.
The following are three important attributes of the XMLHttpRequest object:
| Attributes | Description |
|---|---|
| onreadystatechange | Storage function (or function name), this function will be called whenever the readyState property changes. |
| readyState | Stores the status of XMLHttpRequest. Changes from 0 to 4.
|
| status | 200: "OK" 404: Page Not Found |
In the onreadystatechange event, we specify the tasks to be performed when the server response is ready to be processed.
When readyState is equal to 4 and the status is 200, it means that the response is ready:
Example
<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 改变内容</button>
</body>
</html>Note: onreadystatechange The event is triggered 5 times (0 - 4), corresponding to each change in readyState.
Using callback functions
A callback function is a function that is passed to another function in the form of parameters.
If there are multiple AJAX tasks on your website, then you should write a standard function for creating an XMLHttpRequest object and call that function for each AJAX task.
This function call should contain the URL and the task to be performed when the onreadystatechange event occurs (it may be different for each call):
Example
< ;html>
<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 改变内容</button>
</body>
</html>