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

忘是亡心i 2021-07-04 17:56 416阅读 0赞

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

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

**1， accessConnection.java**

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

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文件的形式输出客户端。代码如下：

<%@ 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， 客户端代码**

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

<%@ 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，****运行效果**

运行前：

![1346806770_2065.JPG][]

删除后：

![1346806812_7019.JPG][]

[1346806770_2065.JPG]: https://img-my.csdn.net/uploads/201209/05/1346806770_2065.JPG
[1346806812_7019.JPG]: https://img-my.csdn.net/uploads/201209/05/1346806812_7019.JPG