使用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也完成类似功能,那也是一种不错的解决方案;
  • 目前暂无港澳台地区的数据,网上搜索到的这部分资料不全。如有网友能提供最新数据,不胜感激。

发表评论