ajax 实现 之一 学习

js 代码       

function Change_Select(){
           var selectType = document.getElementById('selectType').value;//大类 1 网格去2
           switch (selectType) {
             case "1" :
              var zhi=document.getElementById('maintype').value;//大类的id
              break;
             case "2" :
                var zhi=document.getElementById('village').value;//村的id
              break;
           }
            var url="<%=request.getContextPath()%>/SelectServlet?id="+escape(zhi)+"&selectType="+escape(selectType);
            if(window.XMLHttpRequest){
                req=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if(req){
                req.open("get",url,true);//开始调用url 获取xml文件
                req.onreadystatechange=callback;
                req.send(null);
            }
        }
        function callback(){
            if(req.readyState == 4){
                if(req.status == 200){
                    parseMessage();
                }else{
                     alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
        var phoneselect ;
        function parseMessage(){
            var select_root = '';
            var xmlDoc=req.responseXML.documentElement;//获取xml 元素
            var xSel=xmlDoc.getElementsByTagName('select');//获取select元素
            phoneselect = xmlDoc.getElementsByTagName('select');
            var selectType = document.getElementById('selectType').value;
             switch (selectType) {
             case "1" :
              select_root=document.getElementById('subtype');
              break;
             case "2" :
                select_root=document.getElementById('netname');
                break;
           }
            select_root.options.length=0;
            for(var i=0;i<xSel.length;i++){
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);//添加一个option
                }catch(e){
                }
//                if(i==0){
//                  var valuephone = phoneselect[i].childNodes[2].firstChild.nodeValue;
//                  document.getElementById('reportertel2').value=valuephone+"";
//                }
            }
        }

jsp代码

<td align="center" width="35%">
      <select class="content_table_select1" name="maintype" id="maintype" onchange="onChange('1');">
         <option value="">-请选择-</option>
        <%
         for(int i = 0 ;i<typediclt.size();i++){
            Eventtypedic e = (Eventtypedic)typediclt.get(i);
        %>
         <option value="<%=e.getId()%>"><%=e.getEventtypename()%></option>
         <%
         }
         %>
      </select>
    </td>
    <td align="center" width="15%">小&nbsp;&nbsp;&nbsp;&nbsp;类</td>
    <td align="center" width="35%">
      <select class="content_table_select1" name="subtype" id="subtype">
      </select>
    </td>

类代码

  public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/xml; charset=GBK");
        response.setHeader("Cache-Control", "no-cache");
        String objid=request.getParameter("id").toString();
        String selectType = request.getParameter("selectType").toString();//获取大类或者村
        String xml_start = "<?xml version='1.0' encoding='GBK'?><selects>";
        String xml_end="</selects>";
        String xml_mid="";
        List lt = null;
        // 1 大小类选择， 2 网格区网格员选择。
        if("1".equals(selectType)){
           lt = EventsubtypedicService.getEventtypedic(objid);
          if (lt != null && lt.size() > 0) {
            for (int i = 0; i < lt.size(); i++) {
              Eventsubtypedic e = (Eventsubtypedic) lt.get(i);
              xml_mid += "<select><value>" + e.getId() + "</value><text>" +
                  e.getEventsubtypename() + "</text></select>";
            }
          }
        }else if("2".equals(selectType)){
           lt = EventService.getNetname(objid);
           if (lt != null && lt.size() > 0) {
             for (int i = 0; i < lt.size(); i++){
              Object obj [] = (Object [])lt.get(i);
              xml_mid += "<select><value>" + obj[0] + "</value><text>" +obj[1]+ "</text><phone>" +obj[2]+ "</phone></select>";
             }
           }
        }
        String xml=xml_start+xml_mid+xml_end;
        response.getWriter().write(xml);
    }