实现web页面局部动态刷新

2022-03-09 01:21:17

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

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

 

1， accessConnection.java

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

[html] view plaincopy
  1. package com.njue.DBManager;  
  2.   
  3.   
  4. import java.io.File;  
  5. import java.sql.*;  
  6.   
  7.   
  8. public class accessConnection {  
  9. ResultSet   r;  
  10.     public accessConnection(String delSql,String sql) throws ClassNotFoundException, SQLException {  
  11.         String   dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";     
  12.           String   user="";     
  13.           String   password="";     
  14.           Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");     
  15.           Connection   c=DriverManager.getConnection(dbUr1,user,password);     
  16.           Statement s=c.createStatement();   
  17.           if(delSql!=null){  
  18.               s.executeUpdate(delSql);  
  19.           }  
  20.           r=s.executeQuery("SELECT   NAME   "+"FROM   test");    
  21.           
  22.         //  s.close();     
  23.   
  24.     }  
  25. public ResultSet getResult(){  
  26.   
  27.     return r;  
  28. }  
  29. }  
  30.   
  31. /*  
  32.  其实最重要的一条语句就是：  
  33.   
  34.      String   dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";  
  35.   
  36. 这个路径的要求是极为严格的，只允许Microsoft Access Driver这三个单词中间各有一个空格，其他地方绝不允许出现空格，还望各位道友仔细检查。  
  37.   
  38. 还有一点就是File.separator，由于不同的操作系统的分隔符可能不一样，况且我们这里直接用E:\dataAnalysis\test.mdb的话，你可能要再加一个反斜杠去进行转义，为了避免麻烦，所以我们直接用File.separator自动获取系统默认的分隔符。  
  39.   
  40.      好了，就如此简单，希望对大家有用！  
  41.  */  


2，  服务器端代码

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

[html] view plaincopy
  1. <%@ page contentType="text/html; charset=utf-8" import="java.sql.*,com.njue.DBManager.*" errorPage="" %>  
  2. <%  
  3.   String id=request.getParameter("name");  
  4.    
  5.   String delSql=null;  
  6.     StringBuffer content=new StringBuffer("");   
  7.   response.setContentType("text/xml");   
  8.   response.setHeader("Cache-Control","no-cache");  
  9.   content.append("<?xml version=\"1.0\"   encoding=\"UTF-8\" ?>");  
  10.   content.append("<contents>");  
  11.   if(id!=null){  
  12.   id=new   String(id.getBytes("ISO-8859-1"), "GBK");   
  13.   delSql="delete from test where NAME='"+id+"'";  
  14.   }  
  15.   try{  
  16.   ResultSet rs=new accessConnection(delSql,null).getResult();  
  17.   
  18.   while(rs.next()){  
  19.      String name=rs.getString(1);  
  20.      content.append("<content>");  
  21.      content.append("<name>"+ name +"</name>");  
  22.      content.append("</content>");  
  23.      }  
  24.     
  25.   }  
  26.  catch(Exception e){  
  27.       e.printStackTrace();  
  28.    }  
  29.     content.append("</contents>");  
  30.    out.print(content);  
  31. %>  


 

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

 

3， 客户端代码

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

[html] view plaincopy
  1. <%@ page contentType="text/html; charset=GBK" import="java.sql.*" errorPage="" %>  
  2. <html>  
  3. <head>  
  4.     <script type="text/javascript">  
  5.     var xmlHttp;  
  6.     var id;  
  7.     function createXMLHttpRequest(){  
  8.       if(window.ActiveXObject) {  
  9.      xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象  
  10.    }  
  11.   else if (window.XMLHttpRequest) {  
  12.      xmlHttp=new XMLHttpRequest();//创建XMLHttpRequet对象  
  13.      }  
  14.     }  
  15.     function startRequest(ele) {  
  16.     id=ele.id;  
  17.  createXMLHttpRequest();   
  18.  xmlHttp.onreadystatechange=handleStateChange;  
  19.  xmlHttp.open("POST", "index.jsp?name="+id, true);  
  20.   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
  21.  xmlHttp.send(null);  
  22.  alert(str);  
  23.  }  
  24. function handleStateChange() {  
  25.   if(xmlHttp.readyState==4) {  
  26.  if(xmlHttp.status==200) {  
  27.           show();  
  28.      }  
  29.   }  
  30. }  
  31. function validate(){  
  32.  createXMLHttpRequest();   
  33.  xmlHttp.onreadystatechange=handleStateChange;  
  34.  xmlHttp.open("GET", "index.jsp", true);  
  35.   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
  36.  xmlHttp.send(null);  
  37. }  
  38. function show(){  
  39.    var xmlDoc=xmlHttp.responseXML;  
  40.    var yan=xmlDoc.getElementsByTagName("content");  
  41.    var ta="<table border=1 width=45% align=center id=ta><tr><td>用户名称</td><td>操作</td></tr>";  
  42.       for(var i=0;i<yan.length;i++){  
  43.       var y=yan[i];  
  44.       var name=y.childNodes[0].firstChild.data;  
  45.           ta+="<tr id='aa'><td width=30%>"+name+"</td>";  
  46.       ta+="<td><p id="+name+"  style='color:green;' onclick='startRequest(this)'><u>删除</u></p></td></tr>";  
  47.      }  
  48.    ta+="</table>";  
  49.    document.getElementById("res").innerHTML=ta;  
  50.    //alert(yan.length);  
  51. }  
  52.     </script>  
  53.   </head>  
  54.     
  55.   <body onLoad="validate()">  
  56.     <div id="res"></div>  
  57.   </body>  


 

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

 

4， 运行效果

 

运行前：

实现web页面局部动态刷新

删除后：

实现web页面局部动态刷新

 

 

上一篇：在web页面里写引用资源绝对路径的替代方法


下一篇：Web页面或URL转换为PDF的在线工具