爲什麼我的下面的ajax不能在異步模式下工作

Question

下面是我在頁面加載時調用的代碼。
它的工作原理，當我使用

xmlhttp.open("GET", "../handlers/fetchshift.ashx?id=" + divs[i].id, false); 

，但如果我用

xmlhttp.open("GET", "../handlers/fetchshift.ashx?id=" + divs[i].id, true); 

xmlhttp.onreadystatechange被稱爲只有最後一個div。爲什麼會發生？我需要它在異步模式。

function myfunction() { 
    try { 

     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 

     } 
     else {// code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     var table = document.getElementById('<%=GridView1.ClientID%>'); 
     if (table == null) return; 
     var divs = table.getElementsByTagName('div'); 
     for (var i = 0; i < divs.length; i++) { 

      xmlhttp.onreadystatechange = function() { 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 

        var msg = xmlhttp.responseText.split("|"); 
        var table = document.getElementById('<%=GridView1.ClientID%>'); 
        var divs = table.getElementsByTagName('div'); 
        for (var i = 0; i < divs.length; i++) { 
         if (divs[i].id == msg[0]) { 
          divs[i].innerHTML = msg[1]; 
          divs[i].parentNode.style.backgroundColor = msg[2]; 
         } 

        } 
       } 
      } 



      xmlhttp.open("GET", "../handlers/fetchshift.ashx?id=" + divs[i].id, false); 

      xmlhttp.send(); 
     } 


    } catch (e) { 
     alert(e); 
    } 
} 

Answer 1

您需要創建for週期內的新xmlhttp對象。目前，您每次都覆蓋所有內容，因此只有最後一個請求才會實際完成。

它在同步模式下工作，因爲xmlhttp.open()將阻塞，直到一切完成，因此在下一次迭代中，所有內容都被覆蓋，但不再重要。

function myfunction() { 
    try { 
     var table = document.getElementById('<%=GridView1.ClientID%>'); 
     if (table == null) return; 
     var divs = table.getElementsByTagName('div'); 
     for (var i = 0; i < divs.length; i++) { 

     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp = new XMLHttpRequest(); 
      } 
      else {// code for IE6, IE5 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 

      xmlhttp.onreadystatechange = function() { 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 

        var msg = xmlhttp.responseText.split("|"); 
        var table = document.getElementById('<%=GridView1.ClientID%>'); 
        var divs = table.getElementsByTagName('div'); 
        for (var i = 0; i < divs.length; i++) { 
         if (divs[i].id == msg[0]) { 
          divs[i].innerHTML = msg[1]; 
          divs[i].parentNode.style.backgroundColor = msg[2]; 
         } 

        } 
       } 
      } 

      xmlhttp.open("GET", "../handlers/fetchshift.ashx?id=" + divs[i].id, false); 
      xmlhttp.send(); 
     } 
    } catch (e) { 
     alert(e); 
    } 
}