java 如何刷新前端页面 javaweb局部刷新

转载

mob6454cc74e2cb 2023-09-15 15:55:59

文章标签 java 如何刷新前端页面 Ajax编程 Web自动刷新 xml bc 文章分类 Java 后端开发

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

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

1， accessConnection.java

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

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. dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";      
12. user="";      
13. password="";      
14.           Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");     
15. c=DriverManager.getConnection(dbUr1,user,password);      
16. 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. 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.  */

package com.njue.DBManager;


import java.io.File;
import java.sql.*;


public class accessConnection {
ResultSet   r;
	public accessConnection(String delSql,String sql) throws ClassNotFoundException, SQLException {
		String   dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";   
		  String   user="";   
		  String   password="";   
		  Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");   
		  Connection   c=DriverManager.getConnection(dbUr1,user,password);   
		  Statement s=c.createStatement(); 
		  if(delSql!=null){
			  s.executeUpdate(delSql);
		  }
		  r=s.executeQuery("SELECT   NAME   "+"FROM   test");  
		
		//  s.close();   

	}
public ResultSet getResult(){

	return r;
}
}

/*
 其实最重要的一条语句就是：

	 String   dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";

这个路径的要求是极为严格的，只允许Microsoft Access Driver这三个单词中间各有一个空格，其他地方绝不允许出现空格，还望各位道友仔细检查。

还有一点就是File.separator，由于不同的操作系统的分隔符可能不一样，况且我们这里直接用E:\dataAnalysis\test.mdb的话，你可能要再加一个反斜杠去进行转义，为了避免麻烦，所以我们直接用File.separator自动获取系统默认的分隔符。

     好了，就如此简单，希望对大家有用！
 */

2， 服务器端代码

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

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

<%@ page contentType="text/html; charset=utf-8" import="java.sql.*,com.njue.DBManager.*" errorPage="" %>
<%
  String id=request.getParameter("name");
 
  String delSql=null;
    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>");
  if(id!=null){
  id=new   String(id.getBytes("ISO-8859-1"), "GBK"); 
  delSql="delete from test where NAME='"+id+"'";
  }
  try{
  ResultSet rs=new accessConnection(delSql,null).getResult();

  while(rs.next()){
     String name=rs.getString(1);
     content.append("<content>");
     content.append("<name>"+ name +"</name>");
     content.append("</content>");
     }
  
  }
 catch(Exception e){
      e.printStackTrace();
   }
    content.append("</contents>");
   out.print(content);
%>

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

3，客户端代码

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

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
10.    }  
11.   else if (window.XMLHttpRequest) {  
12. xmlHttp=new
13.      }  
14.     }  
15.     function startRequest(ele) {  
16. id=ele.id;   
17.  createXMLHttpRequest();   
18. xmlHttp.onreadystatechange=handleStateChange;   
19. 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. xmlHttp.readyState==4) {   
26. 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. xmlDoc=xmlHttp.responseXML;   
40. yan=xmlDoc.getElementsByTagName("content");   
41. ta="<table border=1 width=45% align=center id=ta><tr><td>用户名称</td><td>操作</td></tr>";   
42. i=0;i<yan.length;i++){   
43. y=yan[i];   
44. name=y.childNodes[0].firstChild.data;   
45. <tr id='aa'><td width=30%>"+name+"</td>";   
46. <td><p id="+name+"  style='color:green;' onclick='startRequest(this)'><u>删除</u></p></td></tr>";   
47.      }  
48. </table>";   
49. .innerHTML=ta;   
50.    //alert(yan.length);  
51. }  
52. </script>
53. </head>
54.     
55. <body onLoad="validate()">
56. <div id="res"></div>
57. </body>

<%@ page contentType="text/html; charset=GBK" import="java.sql.*" errorPage="" %>
<html>
<head>
	<script type="text/javascript">
	var xmlHttp;
	var id;
	function createXMLHttpRequest(){
	  if(window.ActiveXObject) {
     xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象
   }
  else if (window.XMLHttpRequest) {
     xmlHttp=new XMLHttpRequest();//创建XMLHttpRequet对象
     }
	}
	function startRequest(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);
 }
function handleStateChange() {
  if(xmlHttp.readyState==4) {
 if(xmlHttp.status==200) {
          show();
     }
  }
}
function validate(){
 createXMLHttpRequest(); 
 xmlHttp.onreadystatechange=handleStateChange;
 xmlHttp.open("GET", "index.jsp", true);
  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xmlHttp.send(null);
}
function show(){
   var xmlDoc=xmlHttp.responseXML;
   var yan=xmlDoc.getElementsByTagName("content");
   var ta="<table border=1 width=45% 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=30%>"+name+"</td>";
	  ta+="<td><p id="+name+"  style='color:green;' οnclick='startRequest(this)'><u>删除</u></p></td></tr>";
	 }
   ta+="</table>";
   document.getElementById("res").innerHTML=ta;
   //alert(yan.length);
}
	</script>
  </head>
  
  <body onLoad="validate()">
    <div id="res"></div>
  </body>

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

4，运行效果

运行前：

java 如何刷新前端页面 javaweb局部刷新_Web自动刷新