SSH轻量级框架实践课件：AJAX实战技巧

AJAX实战技巧本章目标了解AJAX的应用场合理解AJAX的实现过程掌握AJAX的实现技巧本章简介在前一章中，我们介绍了AJAX的核心技术，相信大家已经掌握了AJAX技术的相关设计方法，例如XMLHttpRequest核心对象，传送XML格式的数据，使用DOM解析XML数据及操纵HTML文档等等。那么在哪些情况下需要应用AJAX技术?当然，AJAX的潜力几乎是无穷尽的，关于AJAX的使用，灵感可能源源不断。本章将通过一些实际案例来帮助大家积累更多的AJAX实战经验，体会更多的AJAX技术的魅力。对AJAX应用积累的经验越多，你就越会找到自己的方法来改善应用。完成表单验证对于数据有效性，有一句金玉良言，即防患于未然，杜绝错误的发生。但是如果真的出现了错误，就应该第一时间通知用户。在传统的WEB应用中必须提交整个页面才能验证数据，或者要依赖复杂的JavaScript检验表单。当然有些验证确实很简单，可以使用JavaScript编写，但是另外一些验证则不然，完全依靠JavaScript编写是办不到的。利用AJAX，你可以方便地调用服务器端的验证程序，而无需提交整个页面。在多数情况下，这个验证逻辑写起来更简单，测试也更容易完成表单验证动态加载列表框Web应用通常使用“向导工具”设计原则来构建，即每个屏幕要求用户输入少量的信息，每个后续页的数据都依据前一页的输入来创建。对于某些情况，这个设计模式非常有用，可以使得用户以一种逐步、有序的方式完成任务。遗憾的是，在AJAX技术出现之前，当基于用户输入修改页面的某些部分时，动态地更新页面而不刷新整个页面是很难办到的，甚至根本不可能。避免完全页面刷新的一种技术是在页面上隐藏数据，并在需要时再显示它们。例如：选择框B的值要根据选择框A中选值来填写，此时B的所有可取值就可以放在隐藏的选择框中，当选择框A中的所选值变化时，JavaScript可以确定要显示哪一个隐藏的选择框，并将它置为可见，同时把前一个选择框置为不可见。这是一种很有用的技术，但它们只是在有限的情况下可用，即页面中仅限于根据用户输入对有限的选择进行修改，而且这样的选择必须相对较少。实现自动完成我们遇到的最受欢迎的功能之一就是自动完成。著名的搜索网站Google提供的自动完成功能确实让人赞叹不已，当用户在搜索输入框中输入文字时，会及时显示一个下拉区，并提供一些最有可能的答案让用户进行快速选择，在下拉区中甚至还能使用上、下箭头键。由于为给定项提供了一些结果，用户就能更清楚地知道具体完成搜索时可能会得到的结果。本章最后一个案例，我们来实现这个自动完成功能。我们的例子所实现的功能比不上Google的那么丰富，但是我们确实可以从中了解到利用AJAX可以做些什么。在本例中，当用户在文本框中输入待查询的车型名称，页面中将根据用户输入的文字信息及时给出提示列表，以帮助用户进行快速选择，这些提示信息来源于数据库。为了方便起见，本例仍然使用上一个案例所创建的项目Chapter03，以及该案例中所创建的数据表car。实现自动完成实现步骤首先，我们在Chapter03项目中找到DBOperator类，在其中添加一个方法，该方法根据车型名称的前缀查询car表中匹配的车型列表接下来创建搜索页面，命名为autoComplete.jsp

在该页面中，一旦用户在文本框中输入文字，即引发“onkeyup”事件，并调用findModels（）函数。在该函数中先初始化一些全局变量，然后借助AJAX提交请求，同时提交用户已输入的信息。在处理响应的函数handleResponse（）中调用setModels（）函数以完成自动信息提示的功能。3.实现服务器端Servlet程序。本例使用了POST提交方式，在autoComplete.java的doPost（）方法中，首先获取请求数据，即需要匹配车型的字符串前缀，然后调用数据库操作的JavaBean完成数据库的查询，最后将获得的数据以XML格式发送回客户端总结本章提供了几个例子，展示了应用AJAX技术改善用户体验的方法。相信这些例子可以帮助你在短时间内体验AJAX的方便、灵活、人性化的交互方式。在许多情况