여러 XMLHttpRequests가 작동하지 않습니다.

Question

나는 이것에 대해 의아해합니다. 두 개의 XMLHttpRequests는 HTML 파일이로드 될 때 각각 다른 Select 요소에서 작동하는 HTML 파일의 Select 요소에서 작동합니다. W3CSchools에서 권장 한대로 콜백 함수를 사용하고 있습니다. 내 변수 xmlHttp가 콜백 함수 외부에서 정의 된 경우 두 번째 요청 만 작동하고 첫 번째 요청은 끝날 기회가 있기 전에 삭제됩니다. 만약 내가 앞에 'var'을 넣으면 똑같은 일이 일어난다. 그러나인데, 내 변수가 앞에 'var'이있는 함수 안에 있으면 아무 일도 일어나지 않습니다. 나는 그것을 "여기에 !!!!!"라고 말한 줄로 좁혔다. 프로그램이 멈춘 것처럼 보입니다. loadXMLDoc 함수가 실제로는 끝나지 않는다는 것을 알고 있습니다. 나는 그것이 'if'부분과 관련이 있고 프로그램이 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> 

자바 스크립트 :

는

<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는 loadXMLDoc 함수 내에서 정의 returnStateListForCounties 함수 내에서 다시 사용하려고한다 xmlHTTP 변수는,이처럼 그것을 할 것입니다 :

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

이렇게하면 데이터 복구를 캡슐화하십시오.