在浏览网页时,有时往往因为查看局部信息,而导致整个网页都需要从服务器端重新加载一次。在传统的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;' onclick='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, 运行效果
运行前: