下拉条的连动-ajax方式

客户端触发：

<select id="category1" onchange="changecategory()">
    <option value="-1">所有一级类别</option>
   <%
    for(int i=0; i<topCategorys.size(); i++) {
     Category c = topCategorys.get(i);
   %>
      <option value="<%=c.getId() %>"><%=c.getName() %></option>
   <%
    }
    %>
   </select>
   <select id="category2">
    <option value="-1">所有二级类别</option>
   </select>

创建XHR：
<script type="text/javascript">
  var req;
  function changecategory() {
   if(window.XMLHttpRequest) {
    req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   var id = document.getElementById("category1").options[document.getElementById("category1").selectedIndex];
   var url = "getchildcategory.jsp?id=" + escape(id.value);

req.open("GET", url, true);
   req.onreadystatechange=callback;
   req.send(null);
  }
  function callback() {
   if (req.readyState == 4) {
    if (req.status == 200) {

　　//parseXml(req.responseXML);//方式1：XML方式（太麻烦）

　　//parse(req.responseText);//方式2：字符方式（最常用）
     eval(req.responseText);//方式3：动态生成javascript方式（最常用）
      } 
     }
  }

function parseXml(msg) {
   var categorys = msg.getElementsByTagName("categorys")[0];
   //alert(categorys.childNodes.length);
   document.getElementById("category2").length=categorys.childNodes.length+1;
   document.getElementById("category2").selectedIndex=0;
   for(var i=0; i<categorys.childNodes.length; i++) {
    var category = categorys.childNodes[i];
    var id = category.childNodes[0].childNodes[0].nodeValue;
    //alert(id);
    var name = category.childNodes[1].childNodes[0].nodeValue;
    //alert(name);
    document.getElementById("category2").options[i+1].value=id;
    document.getElementById("category2").options[i+1].text=name;
   }
  }

function parse(msg) {
   //alert("|" + msg + "|");
   msg = msg.replace(/(^\s*)|(\s*$)/g, "");
   if(msg == null || new String(msg) == "") {
    return;
   }
   var categorys = msg.split("-");
   for(var i=0; i<categorys.length; i++) {
    var category = categorys[i].split("&");
    var id = category[0];
    var name = category[1];
    document.getElementById("category2").length=categorys.length+1;
    document.getElementById("category2").selectedIndex=0;
    document.getElementById("category2").options[i+1].value=id;
    document.getElementById("category2").options[i+1].text=name;
   }
  }
 </script>

server处理方式（getchildcategory.jsp中的内容），返回包含处理结果的javascript代码：

<%
 String strId = request.getParameter("id");
 int id = -1;
 if(strId != null && !strId.trim().equals("")) {
  id = Integer.parseInt(request.getParameter("id"));
 }
 Category parent = CategoryMgr.getInstance().loadById(id);
 List<Category> childs = parent.getChilds();
 StringBuffer buff = new StringBuffer();

//方式1：XML方式

/*

for(int i=0; i<childs.size(); i++) {
  Category c = childs.get(i);
  buff.append("<category><id>" + c.getId() + "</id><name>" + c.getName() + "</name></category>");
 }
 buff.insert(0,"<categorys>");
 buff.append("</categorys>");

*/

//方式2：字符方式

/*

for(int i=0; i<childs.size(); i++) {
  Category c = childs.get(i);
  buff.append(c.getId() + "&" + c.getName() + "-");
 }
 if(childs.size() > 0){
  buff.deleteCharAt(buff.length()-1);
 }
 */

//方式3：动态生成javascript方式
 for(int i=0; i<childs.size(); i++) {
  Category c = childs.get(i);
  buff.append("document.getElementById('category2').options[" + (i+1) + "].value=" + c.getId() + ";\n");
  buff.append("document.getElementById('category2').options[" + (i+1) + "].text='" + c.getName() + "';\n");
 }
 buff.insert(0, "document.getElementById('category2').selectedIndex=0;\n");
 buff.insert(0, "document.getElementById('category2').length=" + (childs.size()+1) +";\n");
 
System.out.println(buff.toString());

//可以采用清除缓存的方法，如下
 response.setContentType("text/xml");
 response.setHeader("Cache-Control", "no-store"); //HTTP1.1 
 response.setHeader("Pragma", "no-cache"); //HTTP1.0
 response.setDateHeader("Expires", 0);
 response.getWriter().write(buff.toString());
%>