AJAX - onreadystatechange 事件（XMLHttpRequest对象的属性）

Posted 2020-06-16

XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

 

 

 

 

 

 

 

 

 

 

 

 

示例：

1 xmlhttp.onreadystatechange=function()
2   {
3   if (xmlhttp.readyState==4 && xmlhttp.status==200)
4     {
5     document.getElementById("myDiv").innerhtml=xmlhttp.responseText;
6     }
7   }

 

当 readyState 等于 4 且状态为 200 时，表示响应已就绪（注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。）

 

使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。

示例：

 1 <script type="text/javascript">
 2 var xmlhttp;
 3 function loadXMLDoc(url,cfunc) /*传递参数，第一个参数表示url地址；第二个参数表示要执行的函数*/
 4 {
 5 if (window.XMLHttpRequest)
 6   {// code for IE7+, Firefox, Chrome, Opera, Safari
 7   xmlhttp=new XMLHttpRequest();
 8   }
 9 else
10   {// code for IE6, IE5
11   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
12   }
13 xmlhttp.onreadystatechange=cfunc; /*调用函数*/
14 xmlhttp.open("GET",url,true);
15 xmlhttp.send();
16 }
17 function myFunction()
18 {
19 loadXMLDoc("/ajax/test1.txt",function()
20   {
21   if (xmlhttp.readyState==4 && xmlhttp.status==200)
22     {
23     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
24     }
25   });
26 }
27 </script>