分类：
2009-06-17 14:24:29
考虑一个有单个页面的用例，用户向这个页面输入的信息要增加到列表中。在这个例子中，你会看到列出某个组织中员工的Web页面。页面最上面有3个输入框，分别接受员工的姓名、职位和部门。点击Add（增加）按钮，将员工的姓名、职位和部门数据提交到服务器，在这里将这些员工信息增加到数据库中。
当使用传统的Web应用技术时， 服务器以重新创建整个页面来做出响应，与前一个页面相比，惟一的差别只是新员工信息会增加到列表中。在这个例子中，我们要使用Ajax技术异步地将员工数 据提交到服务器，并把该数据插入到数据库中。服务器发送一个状态码向浏览器做出响应，指示数据库操作是否成功。假设数据库成功插入，浏览器会使用JavaScript DOM操作用新员工信息动态更新页面内容。这个例子中还创建了Delete（删除）按钮，以便从数据库中删除员工信息。
代码清单4-13显示了html Web页面的源代码。这个页面有两部分：第一部分包括一些输入框，分别接受员工姓名、职位和部门的数据，以及启动数据库插入的Add按钮；第二部分列出数据库中的所有员工，每个记录有自己的Delete按钮，从而能从数据库删除这个记录的信息。
代码清单4-13 employeeList.html
"">
点击Add按钮启动数据库插入操作。基于Add按钮的onclick事件将调用addEmployee函数。addEmployee函数使 用createAddQueryString来建立查询串，其中包括用户输入的员工姓名、职位和部门信息。创建XMLHttpRequest对象并设置 onreadystatechange事件处理程序后，请求提交到服务器。
代码清单4-14列出了处理请求的Java servlet，当接收到请求时将调用servlet的doGet方法。这个方法获取查询串action参数的值，并把请求指向适当的方法。如果是增加信息，请求指向addEmployee方法。
代码清单4-14 EmployeeListServlet.java
package ajaxbook.chap4;
import java.io.*;
import java.net.*;
import java.util.Random;
return uniqueID;
}
private void sendResponse(HttpServletResponse response, String responseText)
throws IOException {
response.setContentType("text/xml");
response.getWriter().write(responseText);
}
}
addEmployee函数负责协调数据库插入和服务器响 应。addEmployee方法委托store- Employee方法完成具体的数据库插入。在实际实现中，storeEmployee方法很可能调用数据库服务，由它处理数据库插入的具体细节。在这个 简化的例子中，storeEmployee将模拟数据库插入，其方法是生成一个随机的惟一ID，模拟实际数据库插入可能返回的ID。生成的惟一ID再返回 给addEmployee方法。
假设数据库插入成功，addEmployee方法则继续准备响应。响应是一个简单的XML串，它向浏览器返回一个状态码。XML通过串连接创建，然后写至响应的输出流。
浏览器通过调用handleAddStateChange方法来处理服务器的响应。只要XMLHttpReq-
uest对象发出信号指出其内部准备状态有变化，就会调用这个方法。一旦readystate属性指示服务器响应已经成功完成，就会调用updateEmployeeList函数，然后再调用clear-
InputBoxes函数。updateEmployeeList函数负责把成功插入的员工信息增加到页面上显示的员工列表中。clearInputBoxes函数是一个简单的工具方法，它会清空输入框，准备接收下一个员工的信息。
updateEmployeeList函数向表中增加行以列出员工的信息。首先使用document.cre-
ateElement方法来创建表行的一个实例。这一行的id属性设置为包括由数据库插入生成的惟一ID的值。id属性值惟一地标识了表行，这样点击Delete按钮时就能很容易地从表中删除这一行。
updateEmployeeList函数使用名为createCellWithText的工具函数来创建表单元格元素，其中包含指定的文 本。createCellWithText函数分别为用户输入的姓名、职位和部门信息创建表单元格，再把各个单元格增加到先前创建的表行中。
最后要创建的是Delete按钮以及包含这个按钮的单元格。使用document.createElement方法创建通用的输入元素，其 type和value属性分别设置为button和Delete，这样就能创建Delete按钮。再创建表单元格，用来放置Delete按钮，并把 Delete按钮作为子元素增加到表单元格。然后把这个单元格增加到表行，接下来将这一行增加到员工列表中，现在行中已经包含了对应员工姓名、职位、部门 和Delete按钮的单元格。
删除员工与增加员工的工作是一样的。Delete按钮的onclick事件处理程序调用delete-
Employee函数，将员工的惟一ID传递给这个函数。此时创建一个简单的查询串，指示想做的动作（删除）和要删除的员工记录的惟一ID。XMLHttpRequest对象的onreadystatechange属性设置为所需的事件处理程序后，提交请求。
EmployeeListServlet servlet使用deleteEmployee方法来处理员工删除用例。这个例子做了简化，在此假设还有另一个方法处理数据库删除的具体细节。如果成功 地完成了数据库删除，deleteEmployee方法会准备XML串，返回给浏览器。与员工增加用例类似，这个用例向浏览器返回一个状态码。一旦创建 XML串，则将XML串通过响应对象的输出流写回到浏览器。
浏览器通过handleDeleteStateChange函数处理服务器响 应，如果响应成功，将转发到deleteEmployeeFromList方法。deleteEmployeeFromList函数从XML响应获取状态 码，如果状态码指示删除不成功，这个函数将立即退出。假设成功地完成了删除操作，这个函数则会继续，使用document.getElementById 方法获取表示所删除信息的表行，然后使用表体的removeChild方法从中删除这一行。
为什么不使用setattribute方法来设置DELETE按钮的事件处理程序？
你可能已经注意到，设置Delete按钮的事件处理程序时采用了何种方法。你可能认为，设置Delete按钮的onclick事件处理程序的代码应该如下所示：
deleteButton.setAttribute("onclick", "deleteEmployee('" + unique_id + "');");
确实，这个代码从理论上是对的，它遵循W3C标准，而且在大多数当前浏览器中都可行，只有IE例外。幸运的是，对于IE也有一个解决办法，它可以在Firefox、Opera、Safari和Konqueror中适用。
这种解决办法是使用点记法引用Delete按钮的onclick事件处理程序，然后使用调用deleteEmployee函数的匿名函数来设置事件处理程序。
图4-14显示了实际运行的动态更新例子。
图4-14 每次点击Add按钮时每个姓名动态增加到列表中，而不必每次都刷新页面
