Ajax的常用技巧6---实现web页面局部动态刷新

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

现在创建一个实例，以演示使用Ajax技术局部动态更新数据。该实例主要是删除Access数据库记录。在删除过程中，只删除指定记录，而不影响显示的其他待删除记录。

1，accessConnection.java

此类用于数据库操作，执行删除语句，返回查询结果集，打开记事本，输入下列代码：

[html] view plain copy

packagecom.njue.DBManager;
importjava.io.File;
importjava.sql.*;
publicclassaccessConnection{
ResultSetr;
publicaccessConnection(Stringdelsql,Stringsql)throwsClassNotFoundException,sqlException{
StringdbUr1="jdbc:odbc:driver={MicrosoftAccessDriver(*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";
Stringuser="";
Stringpassword="";
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connectionc=DriverManager.getConnection(dbUr1,user,password);
Statements=c.createStatement();
if(delsql!=null){
s.executeUpdate(delsql);
}
r=s.executeQuery("SELECTNAME"+"FROMtest");
//s.close();
}
publicResultSetgetResult(){
returnr;
}
}
/*
其实最重要的一条语句就是：
StringdbUr1="jdbc:odbc:driver={MicrosoftAccessDriver(*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";
这个路径的要求是极为严格的，只允许MicrosoftAccessDriver这三个单词中间各有一个空格，其他地方绝不允许出现空格，还望各位道友仔细检查。
还有一点就是File.separator，由于不同的操作系统的分隔符可能不一样，况且我们这里直接用E:\dataAnalysis\test.mdb的话，你可能要再加一个反斜杠去进行转义，为了避免麻烦，所以我们直接用File.separator自动获取系统默认的分隔符。
好了，就如此简单，希望对大家有用！
*/

2，服务器端代码

声明accessConnection.java类，调用getResult()方法得到结果集，然后使用while循环将获取数据库的数据保存到字符串content中，最后将content字符串以XML文件的形式输出客户端。代码如下：

[html] view plain copy

<%@pagecontentType="text/html;charset=utf-8"import="java.sql.*,com.njue.DBManager.*"errorPage=""%>
<%
Stringid=request.getParameter("name");
Stringdelsql=null;
StringBuffercontent=newStringBuffer("");
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
content.append("<?xmlversion=\"1.0\"encoding=\"UTF-8\"?>");
content.append("<contents>");
if(id!=null){
id=newString(id.getBytes("ISO-8859-1"),"GBK");
delsql="deletefromtestwhereNAME='"+id+"'";
}
try{
ResultSetrs=newaccessConnection(delsql,null).getResult();
while(rs.next()){
Stringname=rs.getString(1);
content.append("<content>");
content.append("<name>"+name+"</name>");
content.append("</content>");
}
}
catch(Exceptione){
e.printstacktrace();
}
content.append("</contents>");
out.print(content);
%>

将上述代码保存，我这里保存的名称为index.jsp。

3，客户端代码

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

[html] view plain copy

<%@pagecontentType="text/html;charset=GBK"import="java.sql.*"errorPage=""%>
<html>
<head>
<scripttype="text/javascript">
varxmlHttp;
varid;
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象
}
elseif(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();//创建XMLHttpRequet对象
}
}
functionstartRequest(ele){
id=ele.id;
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("POST","index.jsp?name="+id,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
alert(str);
}
functionhandleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
show();
}
}
}
functionvalidate(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET","index.jsp",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
functionshow(){
varxmlDoc=xmlHttp.responseXML;
varyan=xmlDoc.getElementsByTagName("content");
varta="<tableborder=1width=45%align=centerid=ta><tr><td>用户名称</td><td>操作</td></tr>";
for(vari=0;i<yan.length;i++){
vary=yan[i];
varname=y.childNodes[0].firstChild.data;
ta+="<trid='aa'><tdwidth=30%>"+name+"</td>";
ta+="<td><pid="+name+"style='color:green;'onclick='startRequest(this)'><u>删除</u></p></td></tr>";
}
ta+="</table>";
document.getElementById("res").innerHTML=ta;
//alert(yan.length);
}
</script>
</head>
<bodyonLoad="validate()">
<divid="res"></div>
</body>

将上述代码保存，名称为Del.jsp。在该文件中，createXMLRequest()函数主要是用于创建XMLHttpRequest异步对象，validate()函数项服务器发送异步请求，该请求主要完成数据库记录的显示功能。Callback()函数主要用于处理服务器端的返回数据，即调用show()函数用于设置数据的显示样式。Show()函数主要是解析服务器端返回的XML文件，并解析XML文件中的数据，最后以指定样式显示在当前页。StartRequest()函数也是用于向服务器发送异步请求，但该请求主要完成删除指定数据库记录。在当前网页被加载时，就会执行validate()函数。

4，运行效果

运行前：

删除后：

本文转载自：http://www.jb51.cc/article/p-szgjcrmg-dc.html

原文地址：https://www.jb51.cc/ajax/165078.html

Ajax的常用技巧6---实现web页面局部动态刷新

相关推荐