实现Web页面局部动态更新

来源：互联网发布：nw小世界模型构造算法编辑：程序博客网时间：2024/05/08 17:45

实现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("<?xml version=/"1.0/"   encoding=/"UTF-8/" ?>");
content.append("<contents>");

while(rs.next()){
String name=rs.getString(1);
content.append("<content>");
content.append("<name>"+ name +"</name>");
content.append("</content>");
}
content.append("</contents>");
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="" %>
<html><head>
<script type="text/javascript">
var xmlHttp;
var id;
function trim(str)      
{      
var t = str.replace(/(^/s*)|(/s*$)/g, "");  // 
用正则表达式将前后空格        
return t.replace(/(^　*)|(　*$)/g, "");        
// 用空字符串替代。      
}

function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}

function Start(ele){
//alert(ele.id);
id=ele.id;
createXMLHttpRequest();
var url="Del2.jsp?key="+escape(ele.id);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=Del;
xmlHttp.send(null);
}

function Del(){
if(xmlHttp.readyState==4){
var ss=xmlHttp.responseText;
alert("该项已被删除,1秒后会自动显示最新数据");
setTimeout("validate()",5000);
//alert(ss);
}

}

function show(){
var xmlDoc=xmlHttp.responseXML;
var yan=xmlDoc.getElementsByTagName("content");
var ta="<table border=1 width=35% align=center id=ta>
<tr><td>用户名称</td><td>操作</td></tr>";
for(var i=0;i<yan.length;i++){
var y=yan[i];
var name=y.childNodes[0].firstChild.data;
ta+="<tr id='aa'><td width=15%>"+name+"</td>";
ta+="<td><p id="+name+"
style='color:green;' onclick='Start(this)'><u>删除</u></p></td></tr>";
}
ta+="</table>";
document.getElementById("res").innerHTML=ta;
//alert(yan.length);
}
</script>
</head>
<body onLoad="validate()">
<h3 align=center>删除页面</h3>
<div id="res"></div>

将上述代码保存，名称为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所示窗口：

图10-9 删除记录前

图10-19删除记录后

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