[学习笔记]ajax 动态加载的FAQ (frequently asked question)

效果图为：

======================================================点击超级链接效果为==============

 

 

数据库设计

create table faq(
id int(11) not null auto_increment,

faq varchar(255)  not null,

detail varchar(255)  not null,

primary key (id));

插入以下数据

mysql> select * from faq;
+----+-----------+-----------------------+
| id | faq       | detail                |
+----+-----------+-----------------------+
|  1 | 常见问题1 | <p>问题详细内容</p>   |
|  2 | 常见问题2 | <p>问题二详细内容</p> |
|  3 | 常见问题3 | <p>问题三详细内容</p> |

 

 

 

cn.java.DB 则指的是连接的数据库

 

package  cn.java;

import  java.sql.Connection;
import  java.sql.DriverManager;
import  java.sql.PreparedStatement;
import  java.sql.ResultSet;
import  java.sql.SQLException;
import  java.sql.Statement;
import  java.util.logging.Level;
import  java.util.logging.Logger;
import  javax.naming.Context;
import  javax.naming.InitialContext;
import  javax.naming.NamingException;
import  javax.sql.DataSource;


/** */ /**
 *
 * @author he
 */
public   class  DB  ... {
    
    
    static...{
        
        try...{
      Class.forName("com.mysql.jdbc.Driver");
        }catch(Exception e)...{
        e.getStackTrace();
        }
    }
/** *//**
 * public static void getConnection()
 * 
 * 由于已经有了连接池DataPool
 * 则可以直接使用getDataPool()获得数据源ds
 * ds.getConnection();由于在建立连接池的时候
 * 采用的是mySql 用户名root，密码root都已经添加过了，所以没有必要再使用
 * getConnection(String url,String name,String password);来获得连接
 * 
 */
    
    //获得连接
    public static Connection getConnection()...{
            DataSource ds = null;
            Connection conn = null;
            String url="jdbc:mysql://127.0.0.1/test";
            String name="root";
            String password="root";
        try ...{
          //  ds = getDataPool();
            
            conn=DriverManager.getConnection(url,name,password);
        } catch (SQLException ex) ...{
            Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
       
        }
        return conn;
       
    }
    
    /** *//**
 * 建立数据源名字为DataPool
 * 也就是所谓的连接池。
 */
    private static DataSource getDataPool() throws NamingException ...{
        Context c = new InitialContext();
        return (DataSource) c.lookup("java:comp/env/DataPool");
    }
    /** *//**
     * 创建Statement类的对象
     */
    
    public static Statement getStmt(Connection conn)...{
           Statement stmt = null;
        try ...{
           stmt = conn.createStatement();
        } catch (SQLException ex) ...{
            Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
        }
        return stmt;
    
    }
    /** *//**
     * 查询语句的结果集
     */
    public static ResultSet executeQuery(Statement stmt,String sql)...{
        ResultSet rs = null;
        try ...{
             rs = stmt.executeQuery(sql);
         
        } catch (SQLException ex) ...{
            Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
        }
        return rs;
    }
/** *//**
 更新语句的执行
 *
 */
    public static void executeUpdate(Statement stmt,String sql)...{
        try ...{
            stmt.executeUpdate(sql);
        } catch (SQLException ex) ...{
            Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
        }
    }
    /** *//** 
     * PreparedStatement prepareStatement(String sql,int autoGeneratedKeys)
     * 
     * 创建一个默认 PreparedStatement 对象，该对象能获取自动生成的键。
     * 
     * 获得可动态执行SQL语句的接口(带有自动生成键的)
     *
    */
    public static PreparedStatement prepareKey(Connection conn,String sql,
            int autoGeneratedKey)...{
         PreparedStatement pstmt = null;
        try ...{
           
            pstmt = conn.prepareStatement(sql, autoGeneratedKey);
        } catch (SQLException ex) ...{
            Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
        }
        return pstmt;
    }
    /** *//**
     * 获得PreparedStatement 对象
     */
    public static  PreparedStatement prepareStmt(Connection conn,String sql)...{
        PreparedStatement pstmt = null;
        try ...{
           
            pstmt = conn.prepareStatement(sql);
        } catch (SQLException ex) ...{
            Logger.getLogger(DB.class.getName()).log(Level.SEVERE, null, ex);
        }
        return pstmt;
        
    }
    /** *//**
     * 设置统一关闭方法
     */
     public static void close(Connection conn, Statement stmt, ResultSet rs) ...{
        try ...{

            if (rs != null) ...{
                rs.close();
                rs = null;
            }

            if (stmt != null) ...{
                stmt.close();
                stmt = null;
            }

            if (conn != null) ...{
                conn.close();
                conn = null;
            }

        } catch (SQLException e) ...{
            e.printStackTrace();
        }

    }
}

 

// 用户操作界面  index.jsp

 

 

<% @page contentType = " text/plain; charset=UTF-8 " %>
<% @page language = " java "   %>
<% @page import = " java.sql.* " %>
<% @page import = " cn.java.DB " %>

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN "
    " http://www.w3.org/TR/html4/loose.dtd " >

< html >
     < head >
         < meta http - equiv = " Content-Type "  content = " text/html; charset=UTF-8 " >
         < title > 动态加载 FAQ </ title >
         < script type = " text/javascript " >
             var  xmlHttp;  // 用来保存xmlhttpRequest 对象的全局对象
             var  currFaqId; // 用来保存当前想要获取的FAQ编号
             // 用于创建XMLHttpRequest 对象
             function  createXmlHttp() ... {
        //根据window.XMLHttpRequest 对象是否存在使用不同的创建方式
        if(window.XMLHttpRequest)...{
             xmlHttp=new XMLHttpRequest();   //FireFox ,opera 等浏览器支持的创建方式 
        }else...{
             xmlHttp=new ActiveObject("Microsoft.XMLHTTP");//IE 浏览器支持的创建方式
            }
       }
        // 获取FAQ信息的调用函数
        function  loadFAQ(faqId) ... {
       currFaqId=faqId;
       var currFaqDetail=getFaqDetailDiv(faqId); //获取对应的faqDetail节点
       //判断FAQ详细信息是否已存在，入伙不存在则从服务器获取
       if(currFaqDetail.style.display=="none")...{
           currFaqDetail.style.display="block";//设置div状态为“显示”
          if(currFaqDetail.innerHTML=="")...{
           createXmlHttp();
           xmlHttp.onreadystatechange=loadFAQCallback;
           xmlHttp.open("GET","read_faq.jsp?faqId="+faqId,true);
           xmlHttp.send(null);
     } 
   }else...{
    currFaqDetail.style.display="none"; //设置div 状态为“隐藏”
}
   }
   
   
    // 获取faqId 信息的回调函数
    function   loadFAQCallback() ... {
   if(xmlHttp.readyState==4)...{
//将FAQ 信息写入到对应的DIV
        getFaqDetailDiv(currFaqId).innerHTML=xmlHttp.responseText;

    }
}

function   getFaqDetailDiv(faqId) ... {
return document.getElementById("faqDetail"+faqId);
}

   </ script >
     </ head >
     < body >
        
         < h1 > FAQ (常见问题) </ h1 >
         <%
        String sql = " select id,faq from faq order by id asc " ;  // 定义查询数据库SQL 语句
        Connection conn = null ;
        PreparedStatement pstmt = null ;
        ResultSet rs = null ;
        
         try ... {
       conn= DB.getConnection();
        pstmt=conn.prepareStatement(sql);
        rs=pstmt.executeQuery();
        while(rs.next())...{
        %>
        
        <div>
            <a href="#" onclick="loadFAQ(<%=rs.getInt(1)%>);return false;">
            <%=rs.getString(2) %>
            </a>
            </div>
            <div id="faqDetail<%=rs.getInt(1)%>"  style="display:none"></div>
            
        <% }
        
        } catch (SQLException e) ... {
        System.out.println(e.toString());
        } finally ... {
        DB.close(conn, pstmt, rs);
        }
         %>
     </ body >
</ html >

 

//服务器端响应文件 read_faq.jsp

<% @page contentType = " text/plain; charset=UTF-8 " %>
<% @page language = " java "   %>
<% @page import = " java.sql.* " %>
<% @page import = " cn.java.DB " %>
<%

out.clear();  // 清空当前的输出内容（空格和换行符）

String faqIdStr = request.getParameter( " faqId " );

String faqDetail = null ;   // 用于保存FAQ 详细信息
  if (faqIdStr != null ) ... {
   int faqId=Integer.parseInt(faqIdStr);
   String sql="select detail from faq where id=?";
    Connection conn=null;
        PreparedStatement pstmt=null;
        ResultSet rs=null;
        
        try...{
       conn= DB.getConnection();
        pstmt=conn.prepareStatement(sql);
        pstmt.setInt(1,faqId);
        rs=pstmt.executeQuery();
      if(rs.next())...{
   faqDetail=rs.getString(1);
 }
        }catch(SQLException e)...{
            System.out.println(e.toString());
            
        }finally...{
        DB.close(conn, pstmt, rs);
        }
 
 }

// 根据faqDetail 是否包含正确内容 决定输出的信息
if (faqDetail != null ) ... {
out.println("详细内容："+faqDetail);
} else ... {
out.println("无法获取FAQ 详细信息");
}
        
%>

+----+-----------+-----------------------+