多个 XMLHttpRequest 不起作用

Question

我对此感到困惑。我有两个 XMLHttpRequest 对我的 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>

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

这里的问题是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();
            }
        }

这样你就封装了数据恢复。