Question

我有一个聊天程序，它使用ajax运行php脚本来查询MYSQL数据库，提取聊天详细信息并将其提供给javascript，然后将其推送到div。

目前，数据显示在div的顶部并且正在向下运行，目标是让最新的评论从底部显示在屏幕上。

当前代码段：

AJAX：

function displayChat() {

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("chat").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","displayChat.php?",true);
        xmlhttp.send();

    }

HTML Chat DIV

<div id="chat"></div>

PHP代码

$displayChat =mysql_query(
     "select c.userID, u.userName, c.comments, c.datetime, c.tag
     from chat c
     inner join userAccounts u
     on u.userID=c.userID
     order by c.datetime ASC",
    $connection);

while ($row = mysql_fetch_assoc($displayChat )) {
    echo "(".$row['datetime'].")"." <b>".$row['userName']."</b>: ".$row['comments']."<br>";
}

CSS

#chat {

    height: 90%;
    overflow-y: scroll;     
    background-color: white;
    text-align: left;
    padding-left: 25px;
    bottom: 0;

}

我怎样才能做到这一点？

Answer 1

var current = document.getElementById("chat").innerHTML;
current.innerHTML = current.innerHTML + this.responseText;

如何将它添加到onreadystatechange AJAX函数中？

Answer 2

我认为这就是你要找的东西：

// html
<div id="chat-wrapper">
    <div id="chat-content">

        text1<br>
        text2<br>
    </div>
</div>

// CSS
#chat-wrapper {
    border: 1px #ededed solid;
    height: 200px;
    overflow-y: scroll;     
    background-color: white;
    text-align: left;
    position: relative;
}

#chat-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 25px;
}

然后你需要改变这个

document.getElementById("chat").innerHTML = this.responseText;

到

document.getElementById("chat-content").innerHTML = this.responseText;

最好只将新添加的消息从服务器发送到客户端，否则最终可能会收到大量消息。但这需要更多的工作。（在客户端保存最新的trasmitted msg，将该时间戳添加到请求中，...）

从div底部到顶部

2 个答案: