实现Web页面局部动态更新

实现Web页面局部动态更新

在浏览网页时，有时往往因为查看局部信息，而导致整个网页都需要从服务器端重新加载一次。传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。但是借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息。只更新需要查看的信息，页面中其他信息保持不变。局部动态更新是Ajax技术主要功能表现之一。

现在创建一个案例，演示使用Ajax技术局部动态更新数据。该案例主要是删除数据库记录。在删除过程中，只删除指定记录，而不影响显示的其他待删除记录。该案例需要操作数据库数据，这里我们采用10.1节中数据库test和数据库操作文件Conn.jsp。该案例代码分为服务器端代码和客户端代码。

1．服务器端代码

本案例的服务器代码分为两个部分，一部分主要完成显示数据库记录，一部分完成删除数据库指定记录。首先创建显示数据库记录代码，打开记事本，输入下列代码：

案例10-6

<%@ page contentType="text/html; charset=utf-8" import="java.sql.*" errorPage="" %> <%@ include file="Conn.jsp" %> <% try{ ResultSet rs=getRs("select * from user1"); StringBuffer content=new StringBuffer(""); response.setContentType("text/xml"); response.setHeader("Cache-Control","no-cache"); content.append(""); content.append(""); while(rs.next()){ String name=rs.getString(1); content.append(""); content.append(""+ name +""); content.append(""); } content.append(""); out.print(content); } catch(Exception e){ e.printStackTrace(); } %>

将上述代码保存，名称为Del1.jsp。在该文件中，使用include指令标签将Conn.jsp文件包含过来，在下面使用getRs获取数据库结果集。然后使用while循环将获取数据库数据保存待字符串content中，最后将content字符串以XML文件的形式输出客户端。

现在创建删除指定数据库记录代码。打开记事本，输入下列代码：
案例10-6

<%@ page contentType="text/html; charset=utf-8" import="java.sql.*" errorPage="" %> <%@ include file="Conn.jsp" %> <% String str=request.getParameter("key"); String sql="delete from user1 where user_name='"+str+"'"; try{ Exec(sql); out.print("ok"); } catch(Exception e){ out.print("error"); } %>

将上述代码保存，名称为Del2.jsp。在文件中，主要从客户端获取变量key的值，依据该值删除指定数据库记录。Exec方法是Conn.jsp中声明的方法。

2．客户端代码

客户端代码主要实现异步传送数据和指定数据显示样式。打开记事本，输入下列代码：

案例10-6

<%@ page contentType="text/html; charset=gb2312" import="java.sql.*" errorPage="" %> 删除页面

将上述代码保存，名称为Del.jsp。在该文件中，JavaScript函数trim（）主要是删除字符串左右空格，createXMLHttpRequest()函数主要是创建XMLHttpRequest异步对象，validate()函数向服务器端发送异步请求，该请求主要完成数据库记录的显示功能。callback()函数主要处理服务器端返回数据，即调用show（）函数设置数据的显示样式。show（）函数主要是解析服务器端返回的XML文件，并解析XML文件中的数据，最后以指定样式显示在当前页面。Start()函数也是向服务器端发送异步请求，但该请求主要完成删除指定数据库记录，Del()函数主要处理服务器端删除指定记录后的响应信息。Del函数每执行一次，都有调用setTimeout函数，每隔5秒调用validate函数。在当前网页被加载时，就会执行validate函数。

3．运行

将上述三个JSP文件复制待JSP目录。打开IE浏览器，在地址栏中输入http://localhost:8080/JSP/Del.jsp，单击【转到】，会显示如图10-9所示窗口，单击绿色字体【删除】，会删除相应的用户，删除完毕后，会显示如图10-10所示窗口：

498)this.style.width=498;" border=0>

图10-9  删除记录前

498)this.style.width=498;" border=0>

图10-19删除记录后

这里需要注意的，在删除过程中，不会出现整个页面刷新，只会移除要删除的选项。