实现Web页面的局部动态更新

本例中实现的是页面中局部动态更新的效果，对应页面的显示效果如图5-5所 示，在该页面中实现的相当于商品信息的后台维护页面，在该页面中用户可以动态增加新的品牌信息到数据库中，增加后的品牌信息将会直接在动态表格中进行显 示。同时也可以借助动态表格中的删除按钮进行品牌信息的删除操作。同样在本例中对这些信息的修改并不会导致整个页面的刷新。

图5-5  Web页面的局部刷新效果

传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。

借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息，下面介绍一下具体的实现过程。

首先在Eclipse中新建一个Web项目，项目名称为P55_DyUpdate，对应的浏览器端页面代码如下：

源文件：dyUpdate.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

     

     

 

                 cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0>

   

        

         src="images/promo_list_top.gif" width="100%"

         border=0>

          

   

   

      

                       height=19 colspan="3">品牌信息管理

      

   

   

       

                 增加新品牌:

         

         

                  

         

         

                  

         

 

   

      

          

                品牌信息管理:

         

 

     

 

    

         

       

   

   

 

品牌名称:

操作

在该页面中当用户在文本框中输入新品牌的名称，单击“提交”按钮后，将调用“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程序进行处理。

     xmlns=""

     xmlns:xsi=""

     xsi:schemaLocation="

     /web-app_2_4.xsd">

 

     

          ms1

          classmate.DyUpdateAction

     

 

    

          ms1

          /dyUpdate

     

 

   

 

    dyUpdate.jsp

 

下面我们关注一下服务器端Servlet程序DyUpdateAction.java中对应的程序代码。当接收到浏览器端提交的请求后，首先获取请求的类型及相关的数据信息，然后借助封装了数据库操作的JavaBean完成数据库的操作，如果是添加新品牌信息的请求，则向数据库中进行记录插入，否则进行记录删除操作。

package classmate;

 

import java.io.IOException;

……

 

public class DyUpdateAction extends HttpServlet {

   

      public void init(ServletConfig config) throws ServletException {

     }

   

     /*

      *  处理 请求方法

      */

     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("");     

 

         //数据库操作

         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("" + iMaxId + "");

                        out.println("" + name + "");

                 }

         }

         else if ("delete".equals(action)){

                 strSql = "delete from sort where id= " + id;

                  insRes = db. executeUpdate(strSql);

                  if(insRes>0){

                         out.println("" + id + "");

                  }

         }

          out.println("");

          out.close();

    }

}

在本例中，完成添加新品牌的请求处理之后，返回的XML文档的格式如下：

      新品牌id

      新品牌名称

完成品牌删除的请求处理之后，返回的XML文档的格式如下：

      删除品牌id