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     {

         alert("createAjax Error!");

     }else{

         this.request = request;

         return this;    

     }

 }

 

 

 

 </script>

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