看下面的代码和执行的显示结果，思考一下为什么会出现这样的结果，为什么 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>

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