无刷新显示回帖

在留言板,论坛或贴吧等用户交流系统中,回帖是最常用的操作之一.传统的回帖操作会将用户编写的内容提交到服务器,返回一个提示信息,然后页面自动跳转回发帖主题.这个周期往往要让用户等待几秒到十几秒的时间,同时还要看着浏览器刷新1~2次.使用ajax修改后的回帖功能能不刷新页面

测试环境:eclipse3.2+jdk1.5+mysql

(希望朋友看代码时,能结合上一篇文件中的图示效果来看,就很好理解了)

用户操作界面文件index.jsp


<script type="text/javascript" src="bbs.js"></script>
<link href="bbs.css" type="text/css" rel="stylesheet">

<h1>无刷新显示回帖</h1>
<div id="statusDiv" style="display:none"></div>
<div id="thread">
<%
    String sql = "select * from bbs_post where threadid = 1 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 class="post" id="post<%=rs.getString("id")%>">
                <div class="post_title"><%=rs.getString("title")%> [<%=rs.getString("username")%>]</div>
                <div class="post_content"><pre><%=rs.getString("content")%></pre></div>
            </div>
            <%
        }
    } catch (SQLException e) {
        System.out.println(e.toString());
    } finally {
        DBUtils.close(rs);                  //关闭结果集
        DBUtils.close(pstmt);               //关闭PreparedStatement
        DBUtils.close(conn);                //关闭连接
    }
%>
</div>

<table class="reply">
<tr>
    <td colspan="2" class="title">回帖<input type="hidden" name="threadid" id="threadid" value="1"></td>
</tr>
<tr>
    <td>姓名：</td>
    <td><input type="text" name="username" id="username"></td>
</tr>
<tr>
    <td>标题：</td>
    <td><input type="text" name="post_title" id="post_title"></td>
</tr>
<tr>
    <td>内容：</td>
    <td><textarea name="post_content" id="post_content"></textarea></td>
</tr>
<tr>
    <td colspan="2"><input type="button" onclick="submitPost()" value="提交"></td>
</tr>
</table>


服务器端响应文件bbs_post.jsp

<%
    out.clear();                                        //清空当前的输出内容（空格和换行符）
    request.setCharacterEncoding("UTF-8");              //设置请求字符集为UTF-8

    String title = request.getParameter("title");       //获取title
    String content = request.getParameter("content");   //获取content
    String userName = request.getParameter("username"); //获取username
    String threadId = request.getParameter("threadid"); //获取threadid

    String sql = "insert into bbs_post(title,content,username,threadid) values (?,?,?,?)";   //定义查询数据库的SQL语句
    Connection conn = null;                 //声明Connection对象
    PreparedStatement pstmt = null;         //声明PreparedStatement对象
    ResultSet rs = null;                    //声明ResultSet对象
    try {
        conn = DBUtils.getConnection();     //获取数据库连接
        pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
        pstmt.setString(1, title);          //设置title
        pstmt.setString(2, content);        //设置content
        pstmt.setString(3, userName);       //设置userName
        pstmt.setString(4, threadId);       //设置threadId
        pstmt.executeUpdate();              //执行insert操作
        pstmt.close();

        //获取刚插入数据的新id
        pstmt = conn.prepareStatement("select last_insert_id()");
        rs = pstmt.executeQuery();
        if (rs.next()) {
            out.print(rs.getString(1));     //输出新id
        }
    } catch (SQLException e) {
        System.out.println(e.toString());
    } finally {
        DBUtils.close(rs);                  //关闭结果集
        DBUtils.close(pstmt);               //关闭PreparedStatement
        DBUtils.close(conn);                //关闭连接
    }
%>



javascript文件bbs.js

var xmlHttp;                        //用于保存XMLHttpRequest对象的全局变量
var username;                       //用于保存姓名
var title;                          //用于保存标题
var content;                        //用于保存内容
var threadid;                       //用于保存主题编号

//用于创建XMLHttpRequest对象
function createXmlHttp() {
    //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
    } else {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
    }
}

//提交回帖到服务器
function submitPost() {
    //获取帖子中姓名、标题、内容、主题编号四部分信息
    username = document.getElementById("username").value;
    title = document.getElementById("post_title").value;
    content = document.getElementById("post_content").value;
    threadid = document.getElementById("threadid").value;

    if (checkForm()) {
        displayStatus("正在提交……");                      //显示提示信息

        createXmlHttp();                                    //创建XMLHttpRequest对象
        xmlHttp.onreadystatechange = submitPostCallBack;    //设置回调函数
        xmlHttp.open("POST", "bbs_post.jsp", true);         //发送POST请求
        //设置POST请求体类型
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send("username=" + encodeURI(username) +
                     "&title=" + encodeURI(title) +
                     "&content=" + encodeURI(content) +
                     "&threadid=" + threadid);              //发送包含四个参数的请求体
    }
}

//检查表单是否内容已填写完毕
function checkForm() {
    if (username == "") {
        alert("请填写姓名");
        return false;
    } else if (title == "") {
        alert("请填写标题");
        return false;
    } else if (content == "") {
        alert("请填写内容");
        return false;
    }
    return true;
}

//获取查询选项的回调函数
function submitPostCallBack() {
    if (xmlHttp.readyState == 4) {
        createNewPost(xmlHttp.responseText);
        hiddenStatus();
    }
}

//创建新的回帖
function createNewPost(postId) {
    //清空当前表单中各部分信息
    document.getElementById("post_title").value = "";
    document.getElementById("post_content").value = "";
    document.getElementById("username").value = "";

    var postDiv = createDiv("post", "");    //创建回帖的外层div
    postDiv.id = "post" + postId;           //给新div赋id值

    var postTitleDiv = createDiv("post_title", title + " [" + username + "]");  //创建标题div
    var postContentDiv = createDiv("post_content", "<pre>" + content + "</pre>");    //创建内容div
    postDiv.appendChild(postTitleDiv);                          //在外层div追加标题
    postDiv.appendChild(postContentDiv);                        //在外层div追加内容

    document.getElementById("thread").appendChild(postDiv);     //将外层div追加到主题div中
}

//根据className和text创建新的div
function createDiv(className, text) {
    var newDiv = document.createElement("div");
    newDiv.className = className;
    newDiv.innerHTML = text;
    return newDiv;
}

//显示提示信息div
function displayStatus(info) {
    var statusDiv = document.getElementById("statusDiv");
    statusDiv.innerHTML = info;
    statusDiv.style.display = "";
}

//隐藏提示信息div
function hiddenStatus() {
    var statusDiv = document.getElementById("statusDiv");
    statusDiv.innerHTML = "";
    statusDiv.style.display = "none";
}



样式表文件bbs.css




body, td, input, textarea {
    font-family:Arial;
    font-size:12px;
}


#thread {
    border:1px solid black;
    width:300px;
    margin-bottom:10px;
}


#statusDiv {
    border:1px solid #999;
    background:#FFFFCC;
    width:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -100px;
    width:280px;
}


div.post {
    border-bottom:1px solid black;
    padding:5px;
}


div.post_title {
    border-bottom:1px dotted #0066CC;
    font-weight:bold;
}


div.post_content {
    font-size:12px;
    margin:5px;
}


table.reply {
    border-collapse:collapse;
    width:300px;
}


table.reply td {
    border:1px solid black;
    padding:3px;
}


table.reply td.title {
    background:#003366;
    color:#FFFFFF;
}


input, textarea {
    border:1px solid black;
}


textarea {
    width:200px;
    height:50px;
}


pre {
    margin:0;
}