AJAX示例应用-2（两级菜单的联动）-方式3（服务器返回XML数据，真正的AJAX应用）

1.先来JavaScript：

 

< script type = " text/javascript " >
                         var  req;
                         function  changeCategory()  ... {
                            var id = document.form2.category1.options[document.form2.category1.selectedIndex];
                            
                            var url = "getsecondcategories_3.jsp?id=" + escape(id.value);

                            if(window.XMLHttpRequest) ...{
                                req = new XMLHttpRequest();
                            } else if (window.ActiveXObject) ...{
                                req = new ActiveXObject("Microsoft.XMLHTTP");
                            }
                            req.open("GET", url, true);
                            req.onreadystatechange = callback;
                            req.send(null);
                        }
                    
                     function  callback()  ... {
                       if(req.readyState == 4) ...{
                            if(req.status == 200) ...{
                                       parseXML(req.responseXML);
                                }
                            }
                        }
                     function  parseXML(xml)  ... {
                            var categories = xml.getElementsByTagName("categories")[0];
                            
                            document.form2.category2.length = categories.childNodes.length + 1;
                            document.form2.category2.selectedIndex = 0;
                            document.form2.category2.options[0].value = '-1';
                               document.form2.category2.options[0].text = '二级子目录';
                               
                               for(var i=0; i<categories.childNodes.length; i++) ...{
                                   var category = categories.childNodes(i);
                                   var id = category.childNodes[0].childNodes[0].nodeValue;
                                   var name = category.childNodes[1].childNodes[0].nodeValue;
                                   document.form2.category2.options[i+1].value = id;
                                   document.form2.category2.options[i+1].text = name;
                               }
                        }
                    
</ script >

 2.getsecondcategories_3.jsp：（返回XML数据，再在客户端解析该数据）

<% ... @ page language="java" import="java.util.*" pageEncoding="GB18030" %>
<% ... @ page import="com.ycringfinger.shopping.*"  %>
<% ...

    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", 0);
    request.setCharacterEncoding("GB18030");

    int id = Integer.parseInt(request.getParameter("id"));
    Category category = Category.loadById(id);
    List<Category> categories = category.getChilds();
    
    StringBuffer buf = new StringBuffer();
    
    buf.append("<categories>");
    
    for(int i=0; i<categories.size(); i++) {
        Category c = categories.get(i);
        buf.append("<category><id>" + c.getId() + "</id><name>" + c.getName() + "</name></category>");
    }                
    
    buf.append("</categories>");
    
    buf.insert(0, "<?xml version='1.0' encoding='gb18030'?>");
    
    response.getWriter().write(buf.toString());

%>