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:

AttributesDescription
onreadystatechangeStorage 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.

  • 0: Request not initialized

  • 1: Server connection established

  • 2: Request Received

  • 3: The request is being processed

  • 4: The request has been completed and the response is ready

status200: "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>