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 {

alert("createAjax Error!");

}else{

this.request = request;

return this;

}

}

</script>

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