結合兩個沒有jQuery的AJAX

這就是我所擁有的，它大約有80％的時間工作，但每隔一段時間它就會崩潰。任何可以結合這些更好？或者至少在顯示之前檢查兩者是否已經返回有效結果。我嘗試將它們設置爲兩個獨立的功能，並將它們串聯起來，並且由於某種原因無法使用。如果可能，我想避免使用jQuery。由於結合兩個沒有jQuery的AJAX

function doit(str){ 
     var color = document.getElementById('button').value; 
    if (str == "") { 
    document.getElementById("Div1").innerHTML = ""; 
    document.getElementById("Div2").innerHTML = ""; 
    return; 
} else { 
    if (window.XMLHttpRequest) { 
     ajaxRequest = new XMLHttpRequest(); 
     ajaxRequesttwo = new XMLHttpRequest(); 
    } else { 
     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     ajaxRequesttwo = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    ajaxRequest.onreadystatechange = function() { 
     if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) { 
      document.getElementById("Div1").innerHTML = ajaxRequesttwo.responseText; 
       document.getElementById("Div2").innerHTML = ajaxRequest.responseText; 
     } 
    } 
    ajaxRequesttwo.open("GET","ajax/page1.php?r="+str+"&c="+color,true); 
    ajaxRequest.open("GET","ajax/page2.php?q="+str,true); 
    ajaxRequesttwo.send(); 
    ajaxRequest.send(); 
}

}

來源

2015-06-13 jay

如果我理解正確，您想要執行兩個AJAX請求，並在兩個完成後將輸出設置爲兩個div。

選項1：只讓最新的AJAX請求處理程序（可以是請求）做輸出顯示。

function doitnow(str) { 
    // DOM elements/values 
    var div1 = document.getElementById("Div1"); 
    var div2 = document.getElementById("Div2"); 
    var color = document.getElementById('button').value; 

    // reset results 
    if (str == "") { 
     div1.innerHTML = ""; 
     div2.innerHTML = ""; 
     return; 
    } 

    // Prepare AJAX requests & handlers 
    var ajaxRequest1 = new XMLHttpRequest(); 
    var ajaxRequest2 = new XMLHttpRequest(); 
    var result1, result2; // to store results of requests 

    ajaxRequest1.onreadystatechange = function() { 
     if (ajaxRequest1.readyState == 4 && ajaxRequest1.status == 200) { 
      result1 = ajaxRequest1.responseText; 
      attemptDisplay(); 
     } 
    }; 
    ajaxRequest2.onreadystatechange = function() { 
     if (ajaxRequest2.readyState == 4 && ajaxRequest2.status == 200) { 
      result2 = ajaxRequest2.responseText; 
      attemptDisplay(); 
     } 
    }; 
    function attemptDisplay() { 
     // display only if both results are set 
     if (typeof result1 !== 'undefined' && typeof result2 !== 'undefined') { 
      div1.innerHTML = result1; 
      div2.innerHTML = result2; 
     } 
    } 

    // Fire AJAX 
    ajaxRequest2.open("GET","ajax/page1.php?r="+str+"&c="+color,true); 
    ajaxRequest1.open("GET","ajax/page2.php?q="+str,true); 
    ajaxRequest2.send(); 
    ajaxRequest1.send(); 
} //doitnow()

這應該有效。我沒有做噁心ActiveXObject的事情，因爲真的，開發人員實際上不應該在應用程序中使用這種類型的跨瀏覽器「polyfilling」。使用適當的XHR聚合填充，從此，您可能會假裝傳統MS IE的AJAX構造不存在。我建議：https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/XMLHttpRequest/polyfill.js

選項2：ES-6承諾

我知道你不熱衷於jQuery的（也可能是其他庫），但如果你不介意與ES-polyfilling環境6諾言，這也可以是一個優雅的解決方案，特別是通過使用Promise.all。它與選項1基本上是相同的想法，但是被更簡潔的承諾界面抽象出來。

來源

2015-06-13 13:42:45 light

非常感謝你，這工作得很好。我編輯了兩個）out}）;因爲他們可能被遺棄了。你說的其餘部分是高於我的頭..其他人很理解它.. – jay

哪部分你不明白？我只是說你不應該這樣做：ActiveXObject（「Microsoft.XMLHTTP」） - 改爲使用polyfill。對於選項2的承諾，如果你不熟悉，不要理會。 – light

你只檢查兩個Ajax請求之一的準備狀態。如果另一個在第一個沒有準備好時會發生什麼？也許嘗試單獨添加另一個處理程另外，除非你支持非常舊的IE版本（我甚至認爲8以下），你不需要創建一個ActiveXObject作爲後備。

ajaxRequesttwo.onreadystatechange = function(){...}

來源

2015-06-13 13:31:02

信不信由你，我們的瀏覽器在工作中是ie7 ..他們的速度已經超越了 – jay

即使是開發者！一份新工作的時間。大聲笑 –

結合兩個沒有jQuery的AJAX

回答

相關問題