onchange javascript和ajax

时间:2014-05-18 16:30:54

标签: javascript ajax onclick onchange

当我在服务器上运行它时,我不会从我的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>

0 个答案:

没有答案