Javascript 多个XMLHttpRequests不工作

我对此感到困惑。我有两个XMLHttpRequest，它们在HTML文件的Select元素上运行（加载HTML文件时，每一个都在一个不同的Select元素上运行）。我正在使用W3CSchools上推荐的回调函数。如果我的变量xmlHttp是在回调函数之外定义的，则只有第二个请求有效，第一个请求在有机会完成之前被删除。如果我把‘var’放在前面，同样的事情也会发生。但是，如果我的变量在前面有“var”的函数中，那么绝对不会发生任何事情。我已经把范围缩小到了“在这里！！！”这句话似乎就是这个程序挂起的地方。我知道loadXMLDoc函数实际上并没有完成，因为当我将警报放在它之外时，什么也没有发生。我猜想这与“if”部分有关，程序无法识别xmlHTTP，即使它是本地定义的。我对JavaScript还是相当陌生，只是希望能够同时运行多个XMLHttpRequest对象，而不让它们互相妨碍，也不让页面挂起。你知道为什么这样不行吗

HTML:

选择一个状态




选择一个状态

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>

函数loadXMLDoc（方法、数据、url、cfunc）{
var xmlHTTP=new XMLHttpRequest（）；
xmlHTTP.onreadystatechange=cfunc；
open（方法、url、true）；
如果（数据）{
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
发送（数据）；
}否则{
xmlHTTP.send（）；
}
}
函数returnStateListForCountries（）{
loadXMLDoc（'GET'，null，“stateslist.xml”，function（）{
document.getElementById（'countySelect'）。disabled=true；
if（xmlHTTP.readyState==4&&xmlHTTP.status==200）{
//读取XML数据并填充状态菜单
var response=xmlHTTP.responseXML；
var states=response.getElementsByTagName（'state'）；
对于（i=0；i

这里的问题是

xmlHTTP

变量，它在

loadXMLDoc

函数中定义，并尝试在

returnstatelistforcountries

函数中再次使用，我将这样做：

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

---

这样可以封装数据恢复。

id是唯一的。您有3个相同id的select。@rogelio感谢您的关注。我已经更新了HTML部分。总共有4个select元素（具有唯一ID），我现在想更改其中的2个。能否将url复制到w3cschools站点（功能参考）？是的。它位于标题为“使用回调函数”的页面底部。我尝试了他们的“自己尝试”按钮，并尝试将其“var xmlhttp”放在函数中，但在他们的站点上也不起作用。我重新定义了我的函数，以确保所有onreadystatechanges都在loadXMLDoc中，而不是在loadXMLDoc之外，这样就可以在xmlhttp变量是本地变量时访问它。谢天谢地，它成功了。我不知道他们为什么要在W3C学校这样做，特别是当变量必须是全局变量时。谢谢你的回复。这就是我所怀疑的，尽管我希望情况并非如此。我会玩一玩这个封装。谢谢你巴尔德！这是一个救命恩人。我将所有onreadystatechange函数都放入loadXMLDoc中，效果很好。我能够访问局部变量，因此可以根据需要制作多个副本，而不会让调用互相妨碍。

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