在很多系统中，需要用户填写个人资料，其中包含地区、城市、邮政编码等信息。而邮政编码本身包含了地区和城市信息，所以可以利用此规则简化操作。用户只需要输入邮政编码，系统根据邮政编码自动取得地区信息。这样做使得用户可以获得更好的使用体验，也可以减少错误的发生。
要实现自动获取地区信息，主要考虑3个问题：邮编正确性保证，触发自动获取的时机，返回信息的格式。
1．利用onkeypress事件进行检查输入的字符
邮编均由数字组成，为了保证用户不输入数字以外的内容，可以利用onkeypress事件进行检查。当用户在邮编文本框中输入字符时，触发该事件。通过在触发函数中调用event.keyCode属性判断按键keyCode的值是否处于48~57之间（对应数字0~9）。如果在范围之外，则说明输入的不是数字，通过设置event.returnValue = false使本次按键事件失效。这样就可以保证用户输入的字符均为数字。
2．用户将焦点移出邮编文本框时自动获取地区信息
当用户将邮编输入完毕后，会将焦点移出邮编所在文本框，此时可通过onblur事件触发getPostalCode函数以获取地区信息。在向服务器发送请求之前，先判断用户输入的邮编是否是6位数字。如果数字位数不正确，则不需要向服务器发 ......
数据库设计
本实例使用名为postalcode的数据库表，包含的部分数据如图1.4所示。具体的创建数据表语句如下：
CREATE TABLE 'postalcode' (
'id' int(11) NOT NULL auto_increment,
'area' varchar(255) NOT NULL,
'city' varchar(255) NOT NULL,
'code' varchar(6) NOT NULL,
PRIMARY KEY ('id')
) ......
用户操作界面postalcode.html
页面中包含3个文本框，分别表示邮政编码、地区和城市信息。当用户输入邮政编码后，系统将自动从服务器读取地区和城市信息，填充到对应文本框中。详细的函数说明请参考代码中的注释。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>根据邮政编码获取省市信息</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); &n ......
服务器端响应文件postalcode.jsp
服务器响应文件根据用户输入的邮政编码，从数据库中查询对应的地区信息。如果没有取到，则返回空字符串。
<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ page language="java"%>
<%@ page import="java.sql.*,ajax.db.DBUtils"%>
<%!
//根据传入的邮编获取地区信息
String getAreaInfo(String postalCode) {
String areaInfo = null;
//定义查询数据库的SQL语句
String sql = "select * from postalcode where code like ?";
Connection conn = null; //声明Connection对象
......
树形列表（菜单）在Web应用中十分常见，通常应用于目录式结构，例如产品分类、部门机构等。传统的树形菜单主要有两种加载方式：一种是一次性加载全部数据，另一种是根据用户操作逐步加载数据，但是需要刷新页面。前者加载速度较慢，并且存在大量数据没有被使用的浪费情形。后者可以逐步加载，但是频繁地刷新页面在给用户带来不便的同时，也增加了系统开发的复杂度。
当前使用的Ajax技术，同时兼顾了两种传统方式的优点，即无刷新和动态加载特性。从用户体验到服务器负担来讲都是有利的。
由于编写一个动态树形列表要考虑的问题很多，在进入正式的讲解之前，先以一个简单的页面展示一下树形列表的基本原理。了解了基本原理后，再深入研究树形列表的细节就容易多了。图1.6所示是基本原理演示页面的运行效果。
动态树形列表的基本原理是：每当单击一个子项时，动态地在子项节点内追加新的节点，同时依靠样式表设置新节点的缩进。由于新节点在父节点内追加，因此缩进效果也建立在父节点已有的缩进基础上。通过叠加的缩进使得整个列表具有了树形结构。图1.7所示是各函数之间的调用关系。
&nbs ......
技术要点
在基本原理的介绍中，了解到通过在父节点内动态创建子节点，并利用样式表缩进完成树形列表的基本框架。除了这一点外，还有下面一些问题需要考虑。
1．将父节点所有的子节点放入一个容器中
基本原理页面中仅包含了创建子节点的功能，不可以将创建好的节点再进行关闭操作。实际应用中菜单总是包含打开和关闭两种操作。为了方便进行关闭操作，将子节点放入一个容器中，在关闭时只需要设置容器的显示属性即可。
2．节点开关的具体实现
每个父节点的所有子节点放入容器中后，在单击父节点时判断子节点容器的显示状态。如果当前为打开状态，则将其关闭，反之则将其打开。具体使用的方法是调用节点的style.display属性进行判断，关闭时的状态为none，非none时表示打开。为了清晰地表示父节点的打开或关闭状态，使用“＋”和“－”字符进行标识。
3．节点分为目录节点和非目录节点
目录节点下可包含子节点，非目录节点也可称为叶子节点，即该节点不包含子节点。在本例中对这两种节点进行区别对待。单击目录节点将对其子节点进行展开或关闭操作。单击非目录节点将链接到新的页面（目前暂时将新页面地址弹出，在实际应用中可进行修改）。 ......
最新文章 : ajax