javascript - Combine two AJAX without jQuery -

this have , works 80% of time every once in while crash. can combine these better? or @ least check both have returned valid result before displaying. tried setting 2 separate functions , running them in tandem , didn't work either reason. avoid jquery if possible. thanks

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

}

if understand correctly, want execute 2 ajax requests, , set output 2 divs after both complete.

option 1: let latest ajax request handler (can either request) output display.

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; // 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 if both results 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() 

this should work. didn't disgusting activexobject thing because really, developers shouldn't have type of cross-browser "polyfilling" in meat of application. use proper xhr polyfill , henceforth, may pretend legacy ms ie's ajax construct doesn't exist. recommend: https://github.com/financial-times/polyfill-service/blob/master/polyfills/xmlhttprequest/polyfill.js

option 2: es-6 promises

i know you're not keen on jquery (and other libraries), if don't mind polyfilling environment es-6 promises, can elegant solution well, particularly through use of promise.all. it's same idea option 1, abstracted away cleaner promises interface.