[學習筆記]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 詳細信息");
}
        
%>

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