实现Web页面的局部动态更新
时间：2008-11-12 来源：hkebao
本例中实现的是页面中局部动态更新的效果，对应页面的显示效果如图5-5所 示，在该页面中实现的相当于商品信息的后台维护页面，在该页面中用户可以动态增加新的品牌信息到数据库中，增加后的品牌信息将会直接在动态表格中进行显 示。同时也可以借助动态表格中的删除按钮进行品牌信息的删除操作。同样在本例中对这些信息的修改并不会导致整个页面的刷新。
图5-5 Web页面的局部刷新效果
传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。
借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息，下面介绍一下具体的实现过程。
首先在Eclipse中新建一个Web项目，项目名称为P55_DyUpdate，对应的浏览器端页面代码如下：
源文件：dyUpdate.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<LINK href="images/css.css" type=text/css rel=stylesheet>
</head>
<table style="BORDER-COLLAPSE: collapse" borderColor=#111111
cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0>
<TR>
<TD align=middle height=4 colspan="3"><IMG height=4
src="images/promo_list_top.gif" width="100%"
border=0>
</TD>
</TR>
<TR>
<TD align=middle bgColor=#dbc2b0
height=19 colspan="3"><B>品牌信息管理</B>
</TD>
</TR>
<tr>
<td height="20">
增加新品牌:
</td>
<td height="20">
<input id="name" type="text" size="15">
</td>
<td height="20">
<img src="images/ok.gif" onclick="addSort();">
</td>
</tr>
<tr>
<td height="20">
品牌信息管理:
</td>
</tr>
<table border="1" width="400">
<tr>
<td height="20" valign="top" align="center">
品牌名称:
</td>
<td id="pos_1" height="20">
操作
</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</table>
在该页面中当用户在文本框中输入新品牌的名称，单击“提交”按钮后，将调用“addSort()”函数，在该函数中首先获取到用户输入的新品牌信息，借助Ajax提交请求，同时提交文本框中用户填写的新的品牌信息，请求的格式为" dyUpdate?action=add" + "&name="+ name，可以看到，为了表明请求的类型，使用了参数action，其值为“add”,等待服务器端的处理。当服务器端后续处理完成后，将返回最新的商品品牌信息列表，然后在Ajax提供的处理函数中调用“AddSortList()”函数以动态表格的方式在页面的对应位置进行显示，在进行显示时使用了本书第3章中介绍的使用DOM操作HTML的方式。
此外，当用户在动态表格中选择了对应品牌，单击“操作”按钮后，将调用“deleteSort()”，该函数带参数，参数用于传递待操作的品牌标志信息，在“deleteSort()”函数中将提交请求，同时提交品牌标志信息到服务器端，请求的格式为"dyUpdate?action=delete" + "&id=" + id，可以看到，为了表明请求的类型，使用了参数action，其值为“delete”。等待服务器端的处理。当服务器端后续处理完成后，将调用“deleteSortList()”函数借助DOM操作HTML方式从动态表格中去除对应的品牌信息。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交“dyUpdate”请求时，将由服务器端的类名为“classmate.DyUpdateAction”的Servlet程序进行处理。
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>ms1</servlet-name>
<servlet-class>classmate.DyUpdateAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ms1</servlet-name>
<url-pattern>/dyUpdate</url-pattern>
</servlet-mapping>
<!-- The Welcome File List -->
<welcome-file-list>
<welcome-file>dyUpdate.jsp</welcome-file>
</welcome-file-list>
</web-app>
下面我们关注一下服务器端Servlet程序DyUpdateAction.java中对应的程序代码。当接收到浏览器端提交的请求后，首先获取请求的类型及相关的数据信息，然后借助封装了数据库操作的JavaBean完成数据库的操作，如果是添加新品牌信息的请求，则向数据库中进行记录插入，否则进行记录删除操作。
package classmate;
import java.io.IOException;
……
public class DyUpdateAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<GET> 请求方法
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String action = request.getParameter("action");
String name = request.getParameter("name");
String id = request.getParameter("id");
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
out.println("<response>");
//数据库操作
DB db = new DB();
ResultSet rs;
String strSql=null;
int insRes = 0;
if ("add".equals(action)){
//判断用户名是否重复
strSql = "select max(id) from sort";
rs = db.executeQuery(strSql);
int iMaxId=0;
try {
if ( rs.next()) {
iMaxId=rs.getInt(1)+1;
}
else {
iMaxId=1;
}
} catch (SQLException e) {
e.printStackTrace();
}
if ( iMaxId>0 ){
strSql = "insert into sort values('"
+ iMaxId +"','"
+ name +"')";
insRes = db. executeUpdate(strSql);
}
if(insRes>0){
out.println("<id>" + iMaxId + "</id>");
out.println("<name>" + name + "</name>");
}
}
else if ("delete".equals(action)){
strSql = "delete from sort where id= " + id;
insRes = db. executeUpdate(strSql);
if(insRes>0){
out.println("<id>" + id + "</id>");
}
}
out.println("</response>");
out.close();
}
}
在本例中，完成添加新品牌的请求处理之后，返回的XML文档的格式如下：
<response>
<id>新品牌id</ id>
<name>新品牌名称</name>
</response>
完成品牌删除的请求处理之后，返回的XML文档的格式如下：
<response>
<id>删除品牌id</ id>
</response>
相关阅读 更多 +
