PHP / Ajax / MySQL滚动加载更多聊天消息

Question

我正在创建一个基于Web的聊天消息传递系统。页面加载后，打开聊天系统时，我只希望在chatbox div中显示12条消息。当用户滚动到顶部时，如何再加载12条消息。

我已经准备好了所有滚动功能和查询功能，我只需要适当的SQL查询即可对聊天消息进行分页。

HTML

<div class="row">
    <div id="scrolling_to_bottom" class="col-md-12 right-header-contentChat">
        <img id="loader" src='http://opengraphicdesign.com/wp content/uploads/2009/01/loader64.gif'>
    </div>
</div>

PHP

<?php

include("connection.php");
session_start();


$active_session_user_email = $_SESSION['user_email'];
$get_active_user_data = "select * from tbl_user where user_email ='$active_session_user_email'";
$run_active_user = mysqli_query($conn, $get_active_user_data);
$active_user_row = mysqli_fetch_array($run_active_user);

$active_user_id = $active_user_row['user_id'];
$active_user_name = $active_user_row['user_name'];


if(isset($_GET['user_name'])){

    $get_username = $_GET['user_name'];
    $get_user = "select * from tbl_user where user_name ='$get_username'";

    $run_user = mysqli_query($conn, $get_user);
    $row_user = mysqli_fetch_array($run_user);

    $username = $row_user['user_name'];

}


$update_msg = mysqli_query($conn, "update tbl_userchat SET msg_status = 'seen' where sender_username = '$username' AND receiver_username = '$active_user_name'");


$sel_msg = "select * from tbl_userchat where (sender_username='$active_user_name' AND receiver_username='$username') OR (receiver_username='$active_user_name' AND sender_username='$username') 
                                                                order by 1 asc limit 10";





$run_msg = mysqli_query($conn, $sel_msg);


$total = mysqli_num_rows($run_msg);

if($total == 0){
    echo "
                                                                                <h1 class='no-messages-style-h1'>Start chatting&nbsp;&#128172;</h1>
                                                                                <p class='no-messages-style-p'>You have no sent or received messages. </p>

                                                                            ";
}else{
    while($row = mysqli_fetch_array($run_msg)){
    $sender_username = $row['sender_username'];
    $receiver_username = $row['receiver_username'];
    $msg_content = $row['msg_content'];
    $msg_date = $row['msg_date'];

        if($active_user_name == $sender_username AND $username == $receiver_username){
            echo "
                                                                                <ul><li>
                                                                                    <div class='rightside-right-chat'>
                                                                                    <span>You<small> $msg_date</small></span><br><br>
                                                                                    <p>$msg_content</p>
                                                                                    </div>
                                                                                </li></ul>
                                                                            ";
        }else if($active_user_name == $receiver_username AND $username == $sender_username){
            echo "
                                                                                <ul><li>
                                                                                    <div class='rightside-left-chat'>
                                                                                    <span>$username<small> $msg_date</small></span><br><br>
                                                                                    <p>$msg_content</p>
                                                                                    </div>
                                                                                </li></ul>";
        }

    }

}

?>

JS

//Function getParameterByName: give it the url and name of href tag and returns the data (example: ?user_name=Christian) - gives Christian
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}



$(document).ready(function(){

    var height = $(window).height(); 
    $('.left-chat').css('height', (height - 92) + 'px'); 
    $('.right-header-contentChat').css('height', (height - 163) + 'px');


    $(".right-header-contentChat").stop().animate({ scrollTop: 1e5}, 500);




    // Assign scroll function to chatBox DIV
    $('.right-header-contentChat').scroll(function(){
        if ($('.right-header-contentChat').scrollTop() == 0){
            // Display AJAX loader animation
            $('#loader').show();

            // I have to fill here!!!!!!!!!!!!!!!!!!!!!!!!!!!!




            $('#loader').hide();

        }
    });




    //Send Messages without refreshing using AJAX
    $("#send").click(function() {

        var message = $("#message").val();
        var recipientUser = getParameterByName('user_name', window.location.href);
        $.ajax({
            type: "POST",
            url: "send.php?user_name="+recipientUser,
            data: {message: message},
            success: function(){                
                $("#message").val('');
            }
        });
        $("#scrolling_to_bottom").stop().animate({ scrollTop: $("#scrolling_to_bottom")[0].scrollHeight}, 500);
    });


    //Display Messages without refreshing using AJAX
    setInterval(function() {
        var receiverUser = getParameterByName('user_name', window.location.href);
        $.ajax({
            type: "POST",
            url: "display.php?user_name="+receiverUser,
            data: {},
            success: function(data){
                $('.right-header-contentChat').html(data);
            }
        });

    }, 250);
});