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

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

1， accessConnection.java
     此类用于数据库操作，执行删除语句，返回查询结果集，打开记事本，输入下列代码：
[html]
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文件的形式输出客户端。代码如下：
[html]
<%@ 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，客户端代码
客户端代码主要实现异步传送数据的显示样式。打开记事本，输入下列代码：
[html]
<%@ 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");

补充：Web开发 , 其他 ,