当我在服务器上运行它时,我不会从我的xml文件中检索任何结果,并且不会在“Google Chrome Developer Tools”上给出任何xmlHttpRequest错误。我是否需要在每个“选项”上使用“onclick”事件,或者我需要使用“onchange”事件。
我想在选中或选择选项时创建它,将XMLHttpRequest发送到服务器并从指定的XML文件中检索信息(城市,村庄,街道,代码)。
function showTowns()
{
var xhr;
var selectValue;
selectValue=document.getElementById("selectBox").value;
var url1="countriesItaXML.xml";
var url2="countriesMakXML.xml";
var url3="countriesUSAXML.xml";
var txt,city,village,street,country,x,xx;
if(window.XMLHttpRequest)
{
xhr= new XMLHttpRequest();
}
else
{
xhr= new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function()
{
if(xhr.readyState==4 && xhr.status==200)
{
if(selectValue=="o1")
{
x=xhr.responseXML.documentElement.getElementsByTagName("country");
for(i=0;i<x.length;i++)
{
city="";
xx=x[i].getElementsByTagName("city");
{
try
{
city=xx[0].firstChild.nodeValue;
}
catch(er)
{
city="undefined";
}
}
village="";
xx=x[i].getElementsByTagName("village");
{
try
{
village=xx[0].firstChild.nodeValue;
}
catch(er)
{
village="undefined";
}
}
street="";
xx=x[i].getElementsByTagName("street");
{
try
{
street=xx[0].firstChild.nodeValue;
}
catch(er)
{
street="undefined";
}
}
code="";
xx=x[i].getElementsByTagName("code");
{
try
{
code=xx[0].firstChild.nodeValue;
}
catch(er)
{
code="undefined";
}
}
txt="<table border='1'><th>City:</th><td>"+city+"</td></tr><tr><th>Village:</th><td>"+village+"</td></tr><tr><th>Street:</th><td>"+street+"</td></tr><tr><th>Code:</th><td>"+code+"</td></tr></table><br />";
document.getElementById('prvGrad').innerHTML=txt;
}
xhr.open("GET",url1,true);
xhr.send();
}
else if(selectValue=="o2")
{
x=xhr.responseXML.documentElement.getElementsByTagName("country");
for(i=0;i<x.length;i++)
{
city="";
xx=x[i].getElementsByTagName("city");
{
try
{
city=xx[0].firstChild.nodeValue;
}
catch(er)
{
city="undefined";
}
}
village="";
xx=x[i].getElementsByTagName("village");
{
try
{
village=xx[0].firstChild.nodeValue;
}
catch(er)
{
village="undefined";
}
}
street="";
xx=x[i].getElementsByTagName("street");
{
try
{
street=xx[0].firstChild.nodeValue;
}
catch(er)
{
street="undefined";
}
}
code="";
xx=x[i].getElementsByTagName("code");
{
try
{
code=xx[0].firstChild.nodeValue;
}
catch(er)
{
code="undefined";
}
}
txt="<table border='1'><th>City:</th><td>"+city+"</td></tr><tr><th>Village:</th><td>"+village+"</td></tr><tr><th>Street:</th><td>"+street+"</td></tr><tr><th>Code:</th><td>"+code+"</td></tr></table><br />";
document.getElementById('prvGrad').innerHTML=txt;
}
xhr.open("GET",url2,true);
xhr.send();
}
else
{
x=xhr.responseXML.documentElement.getElementsByTagName("country");
for(i=0;i<x.length;i++)
{
city="";
xx=x[i].getElementsByTagName("city");
{
try
{
city=xx[0].firstChild.nodeValue;
}
catch(er)
{
city="undefined";
}
}
village="";
xx=x[i].getElementsByTagName("village");
{
try
{
village=xx[0].firstChild.nodeValue;
}
catch(er)
{
village="undefined";
}
}
street="";
xx=x[i].getElementsByTagName("street");
{
try
{
street=xx[0].firstChild.nodeValue;
}
catch(er)
{
street="undefined";
}
}
code="";
xx=x[i].getElementsByTagName("code");
{
try
{
code=xx[0].firstChild.nodeValue;
}
catch(er)
{
code="undefined";
}
}
txt="<table border='1'><th>City:</th><td>"+city+"</td></tr><tr><th>Village:</th><td>"+village+"</td></tr><tr><th>Street:</th><td>"+street+"</td></tr><tr><th>Code:</th><td>"+code+"</td></tr></table><br />";
document.getElementById('prvGrad').innerHTML=txt;
}
xhr.open("GET",url3,true);
xhr.send();
}
}
}
}
</script>
XML代码
<asd>
<country>
<city> New Hampshire </city>
<village> North Conway </village>
<street> White Mount.High. </street>
<code> 3254 </code>
</country>
<country>
<city> Massachussets </city>
<village> Boston </village>
<street> HelloStreet 85 </street>
<code> 020200 </code>
</country>
<country>
<city> New York </city>
<village> New Jersey </village>
<street> NovaJersovska 85 </street>
<code> 99952 enter code here</code>
</country>
</asd>
和HTML代码
<select name="countriesList" id="selectBox" onchange="showTowns(this.value)">
<option value="o1" id="1">Italia</option>
<option value="o2" id="2" selected="selected">Makedonija</option>
<option value="o3" id="3">USA</option>
</select>