使用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文件外联即可。

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

说明：

• 当然使用Javascript＋XSTL也完成类似功能，那也是一种不错的解决方案；
• 目前暂无港澳台地区的数据，网上搜索到的这部分资料不全。如有网友能提供最新数据，不胜感激。

上一篇: 使用AJAX进行验证
下一篇: FLVPlayback的变化
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: LabsLabs
相关日志: