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","width:98%;height:15%;float:left;");
29 else
30 bDiv.setAttribute("style","width: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","width:100%;height:20%;float:left;");
37 else
38 bDiv.setAttribute("style","width: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","width:98%;height:80%;float:left;");
46 else
47 bDiv.setAttribute("style","width: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>
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","width:98%;height:15%;float:left;");
29 else
30 bDiv.setAttribute("style","width: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","width:100%;height:20%;float:left;");
37 else
38 bDiv.setAttribute("style","width: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","width:98%;height:80%;float:left;");
46 else
47 bDiv.setAttribute("style","width: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>
运行结果，注意红色框框部分。
