Объединить два AJAX без jQuery

Question

Это то, что у меня есть, и оно работает примерно в 80% случаев, но каждый раз в то время как он сбой. Можно ли их лучше комбинировать? или, по крайней мере, проверить, что оба они вернули действительный результат перед отображением. Я попытался установить две отдельные функции и запустить их в тандеме, и по какой-то причине это не сработало. Я хотел бы избежать jQuery, если это возможно. Благодаря

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(); 
} 

}

Answer 1

Если я правильно понимаю, вы хотите выполнить два запроса AJAX, и установить выход к двум дивы после того, как будут завершены.

Вариант 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, потому что на самом деле разработчикам действительно не нужно было делать этот тип кроссбраузерного «полиполнения» в мясе приложения. Используйте правильную полиномию XHR и отныне вы можете притвориться, что устаревшая конструкция AJAX MS IE не существует. Я рекомендую: https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/XMLHttpRequest/polyfill.js

Вариант 2: ES-6 Обещания

Я знаю, что вы не заинтересованы в JQuery (и, вероятно, других библиотек), но если вы не возражаете polyfilling среды с ES- 6 Обещания, которые могут быть изящным решением, в частности, с использованием Promise.all. Это, по сути, та же идея, что и в варианте 1, но отвлеклась от интерфейса чистых обещаний.

Answer 2

Вы только проверка состояния готовности одного из двух запросов Ajax. Что произойдет, если другой не готов, когда первый? Возможно, попробуйте добавить другой обработчик отдельно. Кроме того, если вы не поддерживаете очень старые версии IE (я думаю, что ниже 8), вам не нужно создавать ActiveXObject в качестве резервной копии.

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