Несколько XMLHttpRequests не работают

Question

Я озадачен этим. У меня есть два XMLHttpRequests, которые работают с элементами Select моего HTML-файла (каждый из них работает с другим элементом Select прямо при загрузке HTML-файла). Я использую функцию обратного вызова, как было рекомендовано в W3CSchools. Если моя переменная xmlHttp определена вне моей функции обратного вызова, работает только второй запрос, а первый удаляется, прежде чем у него будет шанс закончить. Если я поставлю «var» перед ним, то произойдет одно и то же. Однако, если моя переменная находится внутри функции с «var» перед ней, то абсолютно ничего не происходит. Я сузил его до места, где говорится: «ЗДЕСЬ !!!!!» где программа, кажется, висит. Я знаю, что функция loadXMLDoc на самом деле не заканчивается, потому что, когда я выставляю предупреждение вне этого, ничего не происходит. Я полагаю, что это имеет какое-то отношение к части «если», и программа не может распознать xmlHTTP, хотя она была определена локально. Я по-прежнему довольно новичок в JavaScript и просто хочу иметь возможность запускать сразу несколько объектов XMLHttpRequest без их взаимного доступа друг к другу, но также и без висящей страницы. Любые идеи, почему это не работает?

HTML:

<form> 

    <select id="stateSelectCities"> 
     <!-- Will be populated with MySQL --> 
    </select> 

    <select id="citySelect"> 
     <option>Select a State</option> 
    </select> 

    <br /> 
    <br /> 

    <select id="stateSelectCounties"> 
     <!-- Will be populated with MySQL --> 
    </select> 

    <select id="countySelect"> 
     <option>Select a State</option> 
    </select> 

    <p id="xmltest"></p> 
    <p id="currentState"></p> 
    <p id="sc"></p> 
    <p id="rs"></p> 
    <p id="st"></p> 

</form> 

JavaScript:

<script type="text/javascript"> 
function loadXMLDoc(method, data, url, cfunc) { 
      var xmlHTTP = new XMLHttpRequest(); 
      xmlHTTP.onreadystatechange = cfunc; 
      xmlHTTP.open(method, url, true); 
      if (data) { 
       xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
       xmlHTTP.send(data); 
      } else { 
       xmlHTTP.send(); 
      } 
     } 

function returnStateListForCounties() { 
      loadXMLDoc('GET', null, "stateslist.xml", function() { 
       document.getElementById('countySelect').disabled = true; 
       if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) { 

        // Read the XML Data and Populate Counties States Menu 
        var response = xmlHTTP.responseXML; 
        var states = response.getElementsByTagName('state'); 
        for (i = 0; i < states.length; i++) { 
         var option = document.createElement('option'); 
         option.innerHTML = states[i].childNodes[0].nodeValue; 
         option.setAttribute('onmouseup', 'returnCounties(this.innerHTML)'); 
         document.getElementById("stateSelectCounties").add(option); 
        } 
       } 
       //document.getElementById("sc").innerHTML = 'statusCode: ' + xmlHTTP.status; 
       //document.getElementById("rs").innerHTML = 'readyState: ' + xmlHTTP.readyState; 
       //document.getElementById("st").innerHTML = 'statusText: ' + xmlHTTP.statusText; 

      }) 
     } 

function returnStateListForCities() { 
      loadXMLDoc('GET', null, 'stateslist.xml', function() { 
       document.getElementById('citySelect').disabled = true; 
       // HERE!!!!! 
       if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) { 

        // Read the XML Data and Populate Cities States Menu 
        var response = xmlHTTP.responseXML; 
        var states = response.getElementsByTagName('state'); 
        for (i = 0; i < states.length; i++) { 
         var option = document.createElement('option'); 
         option.innerHTML = states[i].childNodes[0].nodeValue; 
         option.setAttribute('onmouseup', 'returnCities(this.innerHTML)'); 
         document.getElementById("stateSelectCities").add(option); 
        } 
       } 
       document.getElementById("sc").innerHTML = 'statusCode: ' + xmlHTTP.status; 
       document.getElementById("rs").innerHTML = 'readyState: ' + xmlHTTP.readyState; 
       document.getElementById("st").innerHTML = 'statusText: ' + xmlHTTP.statusText; 

      }) 
     } 

//returnStateListForCounties(); 
returnStateListForCities(); 

</script> 

Answer 1

Probleme здесь xmlHTTP переменная, которая определена внутри loadXMLDoc функции и попытаться использовать снова внутри returnStateListForCounties функции, я буду делать это так :

 function loadXMLDoc(method, data, url, cfunc) { 
      var xmlHTTP = new XMLHttpRequest(); 
      xmlHTTP.onreadystatechange = function() { 
       if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) 
       {       
        cfunc(xmlHTTP.responseXML); //Call passed func with the resulting XML 
       } 
      }; 

      xmlHTTP.open(method, url, true); 
      if (data) { 
       xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
       xmlHTTP.send(data); 
      } else { 
       xmlHTTP.send(); 
      } 
     } 

Таким образом, вы ncapsulate восстановление данных.