使用Ajax实现三级级联菜单

本习作并未采用任何框架，而是使用Ajax底层技术。用户通过简单选取省、市、县三级级联菜单，便可无刷新查询国内城市的邮编区号。代码通过W3C验证验证。

相信大家对级联列表框一定不陌生。可能最容易想到的是用JavaScript结合隐藏域来实现，但这样做如果级联菜单上了三级就很复杂，而且第一次获取页面时要载入大量可能永远也不会用到的信息。我曾看过有人用JavaScript写的静态省、市、县三级级联菜单，大小近100K，因此这种作法是不可取的。如果用使用Ajax来实现这个功能，不仅可以简化JavaScript，而且可以优化文件大小，优化执行效率。

本习作并未采用任何框架，而是使用Ajax底层技术：使用XmlHttp结合ASP读取后台数据库，输出XML数据，使用JavaScrip+DOM处理事务逻辑，最后将利用Xhtml+CSS显示效果。用户通过简单选取省、市、县三级级联菜单，便可无刷新查询国内城市的邮编区号。代码通过W3C验证验证。

客户端代码很简单。有几点小技巧可以参考一下。

• 当准备状态改变时，需要为readyState属性指定事件处理函数，该处理函数有两种传递参数的方法：xmlhttp.onreadystatechange= function(){HandleStateChange(param1,param2...)}; 或者 
  xmlhttp.onreadystatechange=new Function("HandleStateChange(param1,param2...)");  
• 添加列表/菜单选项时，使用object.options.add方法比用object.appendChild方法更便捷。
• 不用var声明变量，并将其最先执行，该变量就具有了全局性。
• 当你的JavaScript中有<符号时，进行XHTML W3C验证时，会警告：character "<" is the first character of a delimiter but occurred as data，将含有<符号的代码分离成js文件外联即可。

点击此处查看效果。点击此处下载源文件。

---------------------------------------------------------------

struts2输出xml文件

1. PrintWriter pw = null;       
2. HttpServletResponse response = ServletActionContext.getResponse(); //取response对象       
3. response.setContentType("text/xml;charset=utf-8");           
4. response.setHeader("Cache-Control","no-cache");           
5. pw = response.getWriter();       
6. pw.print("<root>");       
7. pw.print("<msg>sssss</msg>");       
8. pw.print("</root>");       
9. pw.close();