ajax省市联动

步骤

1、页面

<select name="province" id="p">
  <option>===请选择省份===</option>
 </select>
 <select name="city" id="c">
 <option>===请选择城市===</option>
 </select>

2、ProvinceServlet

*当页面加载完毕后马上请求这个Servlet
*它需要加载china.xml文件，把所有的省的名称使用字符发送给客户端

3、页面

*获取这个字符串，使用逗号分割，得到数组
*循环遍历每个字符串(省份的名称），使每个字符串创建一个<option>元素添加到<select name="province">这个元素中

4、CityServlet

*当页面选择某个省时，发送请求
*得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象，把这个元素对象转化为xml字符串，发送给客户端

5、页面

*得到<selcet name="city">中的所有子元素
*得到服务器的响应结果：doc
*获取所有的<city>元素，循环遍历，得到<city>的内容
*使用每个<city>的内容，创建一个<option>元素，添加到<select name="city">

ProvinceServlet

response.setContentType("text/html;charset=utf-8");
  request.setCharacterEncoding("utf-8");
  
  try {
   //Dom解析，得到Document
   SAXReader reader=new SAXReader();
   InputStream input = this.getClass().getResourceAsStream("/china.xml");
   Document doc=reader.read(input);
   /**
    * selectNodes使用该节点作为查询的根节点，
    * 并且将结果作为一个 NodeList 返回数组
    * 并且只能用于xml，而不能用于html
    */
   List<Attribute> arrList=doc.selectNodes("//province/@name");
   /*"//province/@name"----得到的nodeList是attribute集合            
   "//province[@name]"----得到的是有name属性的element集合
   */
   StringBuilder sb=new StringBuilder();
   //遍历所有省份的名称，list里面用size()表示数组长度，将其变为一个字符串
   for(int i=0;i<arrList.size();i++){
    sb.append(arrList.get(i).getValue());
    if(i<arrList.size()-1){
     //最后一个不加逗号
     sb.append(",");
    }
   }
   response.getWriter().print(sb);
  } catch (Exception e) {
   throw new RuntimeException(e);
  }

CityServlet

response.setContentType("text/xml;charset=utf-8");
  request.setCharacterEncoding("utf-8");
  try {
   SAXReader reader=new SAXReader();
   InputStream input = this.getClass().getResourceAsStream("/china.xml");
   Document doc=reader.read(input);
   
   //获取pname的参数
   String pname=request.getParameter("pname");
   //selectSingleNode：查找和 XPath 查询匹配的一个节点。
   Element proEle = (Element) doc.selectSingleNode("//province[@name='"+pname+"']");
   String xmlStr=proEle.asXML();//将这个节点(元素)的开始到结束包含的内容组成String
   response.getWriter().print(xmlStr);
  } catch (Exception e) {
   throw new RuntimeException(e);
  }

页面

js部分

function createXMLHttpRequest() {
 try {
  return new XMLHttpRequest();//大多数浏览器
 } catch (e) {
  try {
   return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
  } catch (e) {
   try {
    return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 
   } catch (e) {
    alert("哥们儿，您用的是什么浏览器啊？");
    throw e;
   }
  }
 }
}
window.onload=function(){
 var xmlHttp=createXMLHttpRequest();
 xmlHttp.open("GET","<c:url value='/ProvinceServlet'/>",true);
 xmlHttp.send(null);
 xmlHttp.onreadystatechange=function(){
  if(xmlHttp.readyState==4 && xmlHttp.status==200){
   var text=xmlHttp.responseText;//此地响应的是一个字符串(province中)
   var arr=text.split(",");
   for(var i=0; i< arr.length;i++){
    var op = document.createElement("option");//创建一个指名名称元素
    op.value = arr[i];//设置op的实际值为当前的省份名称
    var textNode = document.createTextNode(arr[i]);//创建文本节点
    op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
    
    document.getElementById("p").appendChild(op);
   }
  };
 };
 var proSelect=document.getElementById("p");
 proSelect.onchange=function(){
  var xmlHttp = createXMLHttpRequest();
  xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);
  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlHttp.send("pname=" + proSelect.value);//把下拉列表中选择的值发送给服务器！
  xmlHttp.onreadystatechange = function() {
   if(xmlHttp.readyState==4 && xmlHttp.status==200){
    /*
    把select中的所有option移除（除了请选择）
    */
    var citySelect = document.getElementById("c");
    // 获取其所有子元素
    var optionEleList = citySelect.getElementsByTagName("option");
    // 循环遍历每个option元素，然后在citySelect中移除
    while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！
     citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！
    }
    
    
    var doc = xmlHttp.responseXML;
    // 得到china.xml中所有名为city的元素
    
    /***
    getElementsByTagName返回的是集合，一个dom对象，具有length属性
    */
    var cityEleList = doc.getElementsByTagName("city");
    // 循环遍历每个city元素
    for(var i = 0; i < cityEleList.length; i++) {
     var cityEle = cityEleList[i];//得到每个city元素
     var cityName;
     // 获取市名称
     if(window.addEventListener) {//处理浏览器的差异
      cityName = cityEle.textContent;//支持FireFox等浏览器
     } else {
      cityName = cityEle.text;//支持IE
     }
     
     // 使用市名称创建option元素，添加到<select name="city">中
     var op = document.createElement("option");
     op.value = cityName;
     // 创建文本节点
     var textNode = document.createTextNode(cityName);
     op.appendChild(textNode);//把文本节点追加到op元素中
     
     //把op添加到<select>元素中
     citySelect.appendChild(op);
     }
   }
  };
 };
};

html部分

<select name="province" id="p">
  <option>===请选择省份===</option>
 </select>
 <select name="city" id="c">
 <option>===请选择城市===</option>
 </select>

标签：xml,省市,xmlHttp,元素,ajax,联动,var,document,op
来源： https://blog.csdn.net/qq_43501462/article/details/104857746