第18章 AJAX实际应用.ppt

第18章 AJAX实际应用 前三章介绍了AJAX的相关知识。本章将综合运用前面所学到的AJAX的基础知识来制作几个在平常编程过程中经常见到的实际例子。这些例子包括：验证输入内容、动态加载列表框、拖动改变网页布局以及动态文本输入提示框等。通过学习这些例子的制作过程，一方面可以进一步巩固所学到的AJAX相关知识，另一方面也可以提升读者通过所学知识解决具体问题的能力。 18.1 验证输入内容 浏览器/服务器模式的运行离不开用户与服务器之间的互动，而让用户通过表单输入内容是最重要的互动方式的一种。但是用户的输入千差万别，如果用户输入了不当的内容轻者会造成数据无法入库，严重的甚至会对系统的安全构成威胁。本节向读者介绍如何使用AJAX技术实时，对用户输入内容进行验证及提示。 18.1.1 实现目的 通常对于用户输入内容的验证都是通过表单的Submit元素来实现。通过Submit将表单内容提交到服务器，再从后台对内容进行验证，如果内容正确就继续执行操作，反之则给出提示并返回输入页面重新输入。 这种实现方式的弊端非常明显，实现一次验证要进行至少两次的页面刷新，既浪费了时间又浪费了网络资源。 如果能在用户输入每一项内容之后，立即对所输入内容的合法性进行判断并给出相关提示。这样就可以使一切可能的操作都在客户端完成，并在很大程度上减少对服务器的访问次数。有效的克服了传统方法所带来的问题。 18.1.2 设计算法 要实现18.1.1小节所设想的目的，可以通过访问DOM的属性来实现。为每个表单元素，特别是Text文本输入框和Textarea文本域添加onblue方法（失去焦点方法，即当离开这些元素时），将方法指向具体的判断函数。对用户所输入的内容进行判断，并根据结果进行提示。在这些表单元素的后方放置空Div（层元素），并把函数返回的结果动态的显示于这些层元素上。 验证规则既可以存在于客户端也可以存在于服务端CGI。这种方式各有各的优点，把规则存放于客户端的JavaScript函数之中，可以更进一步减少以服务器的访问；而把规则存放于服务端则可以使验证结果更加准确，并且具有更高的安全性。本节采用把验证规则存放于客户端JavaScript的方法来实现。 18.1.3 代码实现 通过18.1.1小节对所要实现目的的分析，以及18.1.2小节对实现算法的设计。本节就来用具体的代码来实成这样的功能。由于本实例只是演示了对用户输入内容的验证，并不提交内容，而且由于采用了把验证规则存放于客户端的方案，所以本代码可以直接运行，无需要启动任何服务。 18.1.4 代码测试 在浏览器中运行该代码，结果如图18.1所示。此处使用到了正则表达式来判断指定内容是否符合规则。如果内容不合法，将会动态显示在指定位置，并要求用户重新输入。如果合法则不执行任命操作。输入内容后的结果如图所示。 18.2 动态加载列表框 动态列表框用通俗的话来说就：多级联动菜单。最常见到的就是省、市、县三级联动菜单。当用户选择一个省之后，就自动在二级列表框中显示该省所包括的市，在三级列表框中显示市所包括的县。本节就向读者介绍，如何使用DOM实现多级联动菜单。 18.2.1 实现目的 列表框是进行用户互动时经常使用到的表单元素。通常的列表框用于选择不重复内容中的一项。通过JavaScript来操作列表框的属性，可以为不同列表框之间建立有机的联系。即一个列表框选择内容的变动，将会影响到其他列表框内容的变动，这就叫联动列表框。列表框联动有时是二级的，有时会出现三级甚至更多级的。本节将通过AJAX来实现一个动态的三级联动菜单。 实现的效果：当一级列表框选中一项如：1时，在二级列表框中显示1-1、1-2……等内容，而三级列表框中显示1-1-1、1-1-2……等内容。这是一个典型的三级联动效果。 三级联动最常用的场合是用户对省、市、县这样的内容的选择。本节就通过AJAX技术来实现一个简单的三级联动效果。 18.2.2 设计算法 要想实现三级联动列表框，最重要的就是使用DOM来操作列表框的各项属性，及使用appendChild()方法来为列表框添加option/option子元素。 首先在当前页面中放置三个select列表框，用ID属性指定其惟一标识。页面加载时，使用onload()方法，为第一个一级select加载内容。第一个select内容的改变直接影响到二级、三级select内容的改变，也为其加载相应的内容。 在页面中为一级、二级列表框指定onchange()方法，当列表框的选定发生改变时，相应的改变二级、三级或者三级的内容。改变时，首先判断这些列表框有无子元素，如果有则使用removeChild()方法删除其下级所有子元素。然后再根据上级列表框的值，使用appendChild()方法为其加载相应