<%--
Document : ajaxFAQ
Created on : 2009-6-1, 16:51:44
Author : andychen
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*, ajax.db.DBUtils"%>
<!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>JSP Page</title>
// <script src="ajaxFAQ.js"></script>
<script language="javascript" type="text/javascript" >
var xmlHttp;
var currFaqId;
function createXMLHttp(str){
xmlHttp = getXMLHTTPRequest();
if(xmlHttp==null){
alert("你的浏览器不支持Ajax");
return;
}
xmlHttp.onreadystatechange =statechanged;
xmlHttp.open("POST","xmlHttpServer.jsp",true);
// xmlHttp.open("GET","xmlHttpServer.jsp?faqId="+faqId,true);
xmlHttp.send(null);
}
//用于创建XMLHttpRequest对象
function getXMLHttpRequest(){
var xmlHttp = null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function statechanged(){
if (xmlHttp.readyState==4){
if(xmlHttp.status ==200){
document.getElementById("select").innerHTML=xmlHttp.responseText;
}
}
}
//获取FAQ信息的调用函数
function loadFAQ(faqId) {
currFaqId = faqId; //记录当前想要获取的FAQ编号
var currFaqDetail = getFaqDetailDiv(faqId); //获取对应的faqDetail节点
if (currFaqDetail.style.display == "none") {
currFaqDetail.style.display = "block"; //设置div状态为“显示”
//判断FAQ详细信息是否已存在，如果不存在则从服务器获取
if (currFaqDetail.innerHTML == "") {
createXmlHttp(); //创建XmlHttpRequest对象
xmlHttp.onreadystatechange = loadFAQCallback;
xmlHttp.open("GET", "read_faq.jsp?faqId=" + faqId, true);
xmlHttp.send(null);
}
} else {
currFaqDetail.style.display = "none"; //设置div状态为“隐藏”
}
}
//获取FAQ信息的回调函数
function loadFAQCallback() {
if (xmlHttp.readyState == 4&&xmlHttp.status==200) {
getFaqDetailDiv(currFaqId).innerHTML = xmlHttp.responseText;//将FAQ信息写入到对应的DIV中
}
}
//根据faqId取得对应的DIV节点
function getFaqDetailDiv(faqId) {
return document.getElementById("faqDetail" + faqId);
}
</script>
</head>
<body>
<h1>Hello World!</h1>
<form>
<select name="customer" οnchange="createXMLHttp(this.value)">
<option value="andy">benren
<option value="chen">taren
<option value="chenlinhua">quanming
</select>
</form>
<p>
<div id="select" ><b>显示选择的姓名.</b></div>
</p>
<h1>FAQ常见的问题</h1>
<%
String sql = "select id, faq from faq order by id asc"; //定义查询数据库的SQL语句
Connection conn = null; //声明Connection对象
PreparedStatement pstmt = null; //声明PreparedStatement对象
ResultSet rs = null; //声明ResultSet对象
try {
conn = DBUtils.getConnection(); //获取数据库连接
pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
rs = pstmt.executeQuery(); //执行查询，返回结果集
while (rs.next()) { //遍历结果集
%>
<div>
<a href="#" οnclick="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 {
DBUtils.close(rs); //关闭结果集
DBUtils.close(pstmt); //关闭PreparedStatement
DBUtils.close(conn); //关闭连接
}
%>
</body>
</html>
