ajax 的 onreadystatechange 事件为何触发多次

看下面的代码和执行的显示结果，思考一下为什么会出现这样的结果，为什么 onreadystatechange 会执行多次。要回答这个问题，我们先来看看 onreadystatechange 的作用。

“onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。” 每次XMLHttpRequest 对象的状态发生改变时，会触发此函数。一共会触发 4 次，从 0 到 4。

  1 <script type="text/javascript">
  2 var baseUrl = "http://g";
  3
  4 var divObj = new Object();
  5
  6 divObj.url = new Array();
  7 divObj.url.push("/index.php/Service/Salaallot");
  8 divObj.url.push("/index.php/Service/Salaallot");
  9 divObj.url.push("/index.php/Service/Salashelve");
10 divObj.url.push("/index.php/Service/Sbch");
11 divObj.url.push("/index.php/Service/Servicesend");
12
13 divObj.name = new Array();
14 divObj.name.push("Test1");
15 divObj.name.push("Test2");
16 divObj.name.push("Test3");
17 divObj.name.push("Test4");
18 divObj.name.push("Test5");
19
20
21 //创建DIV,DIV1....DIV5
22 var ajax = createAjax();
23 for(var i=0;i<1;i++)
24 {
25     var bDiv = document.createElement("div");
26     bDiv.setAttribute("id","div_" + i.toString());
27     if(![-1,])
28         bDiv.setAttribute("cssText","98%;height:15%;float:left;");
29     else
30         bDiv.setAttribute("style","98%;height:15%;float:left;");
31     document.body.appendChild(bDiv);
32
33     var tDiv = document.createElement("div");
34     tDiv.setAttribute("id","div_" + i.toString() + "_t");
35     if(![-1,])
36         bDiv.setAttribute("cssText","100%;height:20%;float:left;");
37     else
38         bDiv.setAttribute("style","100%;height:20%;float:left;");
39     bDiv.appendChild(tDiv);
40     tDiv.innerHTML = divObj.name[i];
41
42     var fDiv = document.createElement("div");
43     fDiv.setAttribute("id","div_" + i.toString() + "_f");
44     if(![-1,])
45         bDiv.setAttribute("cssText","98%;height:80%;float:left;");
46     else
47         bDiv.setAttribute("style","98%;height:80%;float:left;");
48     bDiv.appendChild(fDiv);
49     ajax.request.open("GET", baseUrl + divObj.url[i], true);
50     ajax.divID = "div_" + i.toString();
51     document.getElementById("test1").innerHTML = document.getElementById("test1").innerHTML + "----" + ajax.divID;
52     //alert( ajax.divID );
53     //if(i==divObj.url.length-1)
54         ajax.request.onreadystatechange = updateDiv;
55     ajax.request.send(null);
56 }
57
58
59 function updateDiv()
60 {
61     //alert( ajax.divID );
62     document.getElementById("test").innerHTML = document.getElementById("test").innerHTML + "----" + ajax.divID;
63     if (ajax.request.readyState == 4)
64     {
65        if (ajax.request.status == 200)
66        {
67            document.getElementById(ajax.divID).innerHTML = ajax.request.responseText;
68        }
69     }
70 }
71
72
73
74 //控制事件按顺序执行，托管
75 function ajaxQueue()
76 {
77
78
79
80
81 }
82
83
84 function createAjax()
85 {
86     var request ;
87     try
88     {
89         request = new XMLHttpRequest();
90     }catch(err){
91         try
92         {
93             request = new ActiveXObject("Microsoft.XMLHTTP");
94         }catch(error){
95             request = new ActiveXObject("Msxml2.XMLHTTP");
96         }
97     }
98     if(!request)
99     {
100         alert("createAjax Error!");
101     }else{
102         this.request = request;
103         return this;
104     }
105 }
106
107
108
109 </script>

运行结果，注意红色框框部分。