gpt4 book ai didi

javascript - 多个 XMLHttpRequests 不工作

转载 作者:行者123 更新时间:2023-11-30 17:15:04 25 4
gpt4 key购买 nike

我对此很困惑。我有两个 XMLHttpRequests 对我的 HTML 文件的 Select 元素进行操作(当加载 HTML 文件时,每个操作对不同的 Select 元素进行操作)。我正在使用 W3CSchools 推荐的回调函数。如果我的变量 xmlHttp 在我的回调函数之外定义,则只有第二个请求有效,第一个请求在它有机会完成之前被删除。如果我将“var”放在它前面,也会发生同样的事情。 但是,如果我的变量在前面带有“var”的函数中,则绝对不会发生任何事情。我已将范围缩小到显示“HERE!!!!!”的行的位置是程序似乎挂起的地方。我知道 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>

最佳答案

这里的问题是在 loadXMLDoc 函数中定义的 xmlHTTP 变量,并尝试在 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();
}
}

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

关于javascript - 多个 XMLHttpRequests 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26271993/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com