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 >

 

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

转载于:https://www.cnblogs.com/chy1000/archive/2010/07/08/1773341.html