利用 XMLHttpRequest 提交 JSF 表单

导读：
　　级别： 中级
　　Andrei Cioroianu, 高级 Java 开发人员和顾问, Devsphere
　　2007 年 8 月 22 日
　　在这个包含两部分的系列文章中，作家兼 Java ?开发人员 Andrei Cioroianu 将教您如何使用 Ajax（Asynchronous JavaScript + XML）技术和 JSF（JavaServer Faces）技术自动保存 Java Web 应用程序中的表单数据。您将学会如何用 Ajax 提交 Web 表单、如何使用 JSF 框架处理 Ajax 请求、如何控制 JSF 请求处理生命周期、如何在服务器端管理表单数据，以及如何识别浏览器会话间的匿名用户。此外，本系列还将探究几个经常发生的开发错误，包括错误的表单数据编码和可能导致请求失败及内存泄漏的错误的 Ajax 请求管理。
　　简介
　　很多桌面应用程序允许用户随时保存文件，还有一些产品会自动保存正在编辑的文件以最小化因程序崩溃而造成的数据损失。当用户与 Web 应用程序进行交互时，通常只有当表单提交给服务器时，用户的数据才会被保存。大多数 Web 应用程序不允许用户保存只部分填充的表单，关闭浏览器，然后再继续此任务。此外，如果由于网络问题突然中断了连接，用户的数据将得不到保存，他们的某些工作成果也有可能会因此丢失。
　　 developerWorks Ajax 资源中心
　　请访问 Ajax 资源中心，这里几乎囊括了关于 Ajax 编程模型的所有信息，包括各种文章、教程、论坛、博客、wikis、活动和新闻。
　　Ajax 是解决这类问题的理想解决方案。当使用 Ajax 提交表单数据时，页面不必刷新，滚动条的位置也可以保持不变，就好像所处理的是一个桌面应用程序一样。若用户需要填写复杂表单或者面临数据丢失的风险，他们将会非常青睐这种自动保存功能。例如，假设用户在测试一个产品，当他们填写支持表单以便报告测试问题时，这个 Web 支持表单就应该能定期地自动保存。在测试产品时，用户的系统可能会变得不稳定，在提交完整的表单前，他们可能需要多次重启计算机。表单自动保存功能可以节省时间并且能够防止这种情况下的数据丢失。
　　作为包含两部分的系列文章中的第 1 部分，本期的重点将放在如何用 Ajax 发送表单数据以及如何用 JSF 处理 Ajax 请求。它将向您展示实现数据自动保存的完整数据流程，内容涵盖如何使用 JavaScript 在 Web 浏览器中获取、编码和提交表单数据。本篇文章还会涉及到 JSF 侦听程序如何在服务器端处理已提交的数据，定制 JSF 请求处理生命周期以使它能有效地处理 Ajax 请求。无论是否需要表单自动保存功能或其他类似功能，您都可以将本篇文章介绍的技术应用到基于 Ajax 和 JSF 的任何 Java Web 应用程序中。
　　当用户与 Web 应用程序进行交互时，通常只有当表单提交给服务器后，用户的数据才会被保存。大多数 Web 应用程序不允许用户保存只部分填充的表单、关闭浏览器，然后再继续此任务。此外，如果由于网络问题突然中断了连接，用户的数据将得不到保存，他们的某些工作成果也有可能会因此丢失。Ajax 是解决这类问题的理想解决方案。
　　在客户端获取表单数据
　　本节将给出一个 JSF 表单，其数据通过 JavaScript 和 DOM 在 Web 浏览器中获得。 您可以在自已的 Web 表单应用程序中重用这里介绍的 JavaScript 代码。本节还将解释如何正确地编码表单数据以将它提交给服务器。
　　 构建 JSF 表单
　　让我们先来看一个典型的 JSF 例子。SupportForm.jsp这个页面包括一些基本 HTML 的元素，比如输入框、列表、单选按钮、复选框和提交按钮。所有输入组件都将其值绑定到称为 SupportBean的 JavaBean 属性。这个页面的头部包括一个 <script>标记，用来导入 AutoSaveScript.js文件（请参阅 下载部分）。此 JavaScript 文件包括一个函数，名为 setAutoSaving()，它在 标记的 onload属性内调用，以便在 Web 浏览器加载页面后激活表单的自动保存功能。 清单 1 显示了 SupportForm.jsp页的部分源代码。
　　 清单 1. 包含示例 JSF 表单的 SupportForm.jsp 页
　　

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>