js的ajax做的省市联动

xml写法
<?xml version="1.0" encoding="utf-8" ?>
<shengs>
  <陕西>
    <city>西安</city>
    <city>咸阳</city>
  </陕西>
  <河南>
    <city>郑州</city>
    <city>洛阳</city>    
  </河南>
</shengs>
jsp页面写法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>省市联动</title>
<script language="javascript" type="text/javascript">
 
 var xmlHttp = null;
 var objXML;
 
 function createXMLHttpRequest()
 {
    if (window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    }
    else
    {
        xmlHttp = new XMLHttpRequest();
    }
 
 }
 
 function work()
 {
    if (xmlHttp.readyState==4)
    {    
        if(xmlHttp.status==200)
        {        
            objXML = xmlHttp.responseXML;
            showSheng();            
        }
        else
        {
            alert("服务器返回错误");
        }
    }
 }
 
 function showSheng()
 {
    var shengList = objXML.getElementsByTagName("shengs");  
    for(var i=0;i<shengList[0].childNodes.length;i++)
    {      
        document.getElementById("SelectSheng").options.add(new Option(shengList[0].childNodes[i].nodeName,shengList[0].childNodes[i].nodeName));
        //给select标签加入选项
        //select标签对象.options.add(new Option(文本,值))
     }    
     showShi();
//     var selectSheng = document.createElement("select");
//     selectSheng.onchange = showShi;
 }
 
 function showShi()
 {        
        var shiList = objXML.getElementsByTagName(document.getElementById("SelectSheng").value);            
        document.getElementById("SelectShi").options.length=0;
        //清空select标签下的选项
        //select标签对象.options.length= 0        
        for (var i=0;i<shiList[0].childNodes.length;i++)
        {
            document.getElementById("SelectShi").options.add(new Option(shiList[0].childNodes[i].firstChild.nodeValue,i));
        }        
 }
 
 function getContent()
 {  
    createXMLHttpRequest();  
    if (xmlHttp == null)
    {
        alert("xmlHttp对象没有创建");
    }
    else
    {
        xmlHttp.onreadystatechange = work;
        xmlHttp.open("GET","shengshi.xml",true);
        xmlHttp.send();
    }
 }
 </script>    
</head>

<body onload="getContent()">
    <form id="form1" runat="server">
    <div>
        <select id="SelectSheng" onchange="showShi()"></select>
        <select id="SelectShi"></select>
    </div>
    </form>
</body>
</html>

 
javascript的window.ActiveXObject对象,区别浏览器的方法
(window.ActiveXObject)的作用,用来判断浏览器是否支持ActiveX控件,如果支持ActiveX控件,我们可以利用var xml=new ActiveXObject("Microsoft.XMLHTTP")的形式来创建XMLHTTPRequest对象(这是在IE7以前的版本中)。在较新的IE版本中可以利用var xml=new ActiveXObject("Msxml2.XMLHTTP")的形式创建XMLHttpRequest对象;而在IE7及非IE浏览器中可以利用var xml=new XMLHttpRequest()创建XMLHttpRequest对象。因此我们在创建这个对象的时候必须得考虑浏览器的兼容问题。
 
然后是XMLHTTPRequest的区别
 
我们这里来看看这里是怎么使用它。在使用XMLHTTPRequest对象发送请求和处理响应之前,我们必须要用javascript创建一个XMLHTTPRequest对象。(IE把XMLHTTPRequest实现为一个ActiveX对象,其他的浏览器[如Firefox/Safari/Opear]则把它实现为一个本地的javascript对象)。下面我们就来看看具体怎么运用javascript来创建它吧:
 
<script language="javascript" type="text/javascript">
<!--
var xmlhttp;    // 创建XMLHTTPRequest对象
function createXMLHTTPRequest(){
if(window.ActiveXObject){ // 判断是否支持ActiveX控件
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
}
else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例(本地javascript对象)
}
}
//-->
</script>

你可能感兴趣的:(js的ajax做的省市联动)