AJAX示例应用-2（两级菜单的联动）-方式2（服务器以字符串形式执行代码在客户端运行）

1.直接上JavaScript：

 

< script type = " text/javascript " >
                         var  req;
                         function  changeCategory()  ... {
                            var id = document.form2.category1.options[document.form2.category1.selectedIndex];
                            
                            var url = "getsecondcategories_2.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) ...{
                                    eval(req.responseText);
                                                                    }
                            }
                        }
</ script >

 

2.getsecondcategories_2.jsp：（返回字符串形式的JavaScript代码，由客户端调用eval来执行）

 

<% ... @ 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();
    
    if(categories.size() == 0) {
        buf.insert(0, "document.form2.category2.options[0].value = '-1'; ");
        buf.insert(0, "document.form2.category2.options[0].text = '二级子目录'; ");                    
        buf.insert(0, "document.form2.category2.selectedIndex = 0; ");    
        buf.insert(0, "document.form2.category2.length = 1; ");
    } else {
        for(int i=0; i<categories.size(); i++) {
            Category c = categories.get(i);
            buf.append("document.form2.category2.options[" + (i+1) + "].text = '" + c.getName() + "'; ");
            buf.append("document.form2.category2.options[" + (i+1) + "].value = '" + c.getId() + "'; ");
        }                
        
        buf.insert(0, "document.form2.category2.options[0].value = '-1'; ");
        buf.insert(0, "document.form2.category2.options[0].text = '二级子目录'; ");                    
        buf.insert(0, "document.form2.category2.selectedIndex = 0; ");    
        buf.insert(0, "document.form2.category2.length = " + (categories.size()+1) + "; ");    
    }
    
    response.getWriter().write(buf.toString());

%>