连续滚动。 AJAX，PHP，JAVASCRIPT，MYSQL

I am actually creating a forum. So, there would be a "order by" dropdown box i.e a select tag in html. Where the user selects any order like by time or like, etc. An ajax function is called which dynamically brings content into the page from mysql database.

Select menu

<select name="orderby" onchange="showposts(this.value)">
<option value="1" selected>By Time</option>
<option value="2">By Genuine Count</option>
<option value="3">By Dubious Count</option>
</select>

showposts function

function showposts(str){

        orderby=str;

        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 (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("postsdiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","showposts.php?q="+str,true);
        xmlhttp.send();
}

Showposts.php page

$sql = "SELECT * FROM posts order by date desc ";
$result = $connection->query($sql);
$username=$_SESSION['username'];

while($row = $result->fetch_assoc()) {
    echo "<span id='postspan".$row['id']."' name='postspan".$row['id']."' >";
    echo "<span id='editspan".$row['id']."' name='editspan".$row['id']."' >";
    echo "-----------------------------------</br>";
    echo "-----------------------------------</br>";

    echo "Posted By: ".$row['user']."&nbsp&nbsp&nbsp&nbsp";
    echo "Time: ".$row['date']."</br>";
    echo "<span id=genuinecount".$row['id'].">Genuine Count: ".$row['genuine'].";        
    echo "<span id=dubiouscount".$row['id'].">Dubious Count: ".$row['dubious']."</span>";
    echo "</br>------------------------ </br>";
    echo "Subject: ".$row['subject']."</br>";

    echo "Post: ".$row['post'].'<br />';

}

Problem So, the problem here is, I want to use a continuous scroll option like the one which is used in facebook. All the javascripts and jquery libraries I saw use logic that when the user scrolls down to the page, the javascript then places some content after that. But, here I running a while loop which brings the data from database at a time. So, I couldn't implement the javascript code. So, is there any thing that I could do to achieve continuous scroll, like is there any possibility to break the while loop or retrieving entire data and display part by part or anything like that?

javascript for scrolling

function yhandler(){
    var wrap=document.getElementById('postsdiv');
    var contentheight=wrap.offsetHeight;
    var yoffset=window.pageYOffset;
    var y=yoffset+window.innerHeight;
    if(y>=contentheight){
        showposts();
}
}
window.onscroll=yhandler();

You should look into MySQL LIMIT. The limit function takes 2 input variables, start and length. With these 2 variables you can create a paging system; that would go something among the lines of:

showposts function

//Add a global variable to save the current page:
var currentPage = 0;
var currentType = 0;

function showposts(str){
    //ALL PREVIOUS CODE, UNCHANGED

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("postsdiv").innerHTML+=xmlhttp.responseText;
        }
    }

    if(str != undefined){
        currentType = str; //save the current type for later use
        document.getElementById("postsdiv").innerHTML = "";
    }

    xmlhttp.open("GET","showposts.php?q="+currentType+"&p="+currentPage,true);
    xmlhttp.send();
}

Showposts.php page

<?php
$currentPage = intval($_GET['p']);
$numPerPage = 30; //change this to the number of items you want each page

$sql = "SELECT * FROM posts order by date desc LIMIT ".($currentPage * $numPerPage).", ".$numPerPage;
$result = $connection->query($sql);
$username=$_SESSION['username'];

while($row = $result->fetch_assoc()) {
    echo "<span id='postspan".$row['id']."' name='postspan".$row['id']."' >";
    echo "<span id='editspan".$row['id']."' name='editspan".$row['id']."' >";
    echo "-----------------------------------</br>";
    echo "-----------------------------------</br>";

    echo "Posted By: ".$row['user']."&nbsp&nbsp&nbsp&nbsp";
    echo "Time: ".$row['date']."</br>";
    echo "<span id=genuinecount".$row['id'].">Genuine Count: ".$row['genuine']."</span>";        
    echo "<span id=dubiouscount".$row['id'].">Dubious Count: ".$row['dubious']."</span>";
    echo "</br>------------------------ </br>";
    echo "Subject: ".$row['subject']."</br>";

    echo "Post: ".$row['post'].'<br />';
}
?>

Now you need to detect when a user has scrolled to the bottom of the page, then call the following function:

function nextPage(){
    currentPage++;

    showposts();
}

Use the PDO class built into php and the query from the database will return all the rows as an array of stdclass objects. Then use PDOStatement::fetchObject() to loop through the array

As you are retrieving the data from server using JavaScript, why don't you put the view with the help of JavaScript instead of PHP.

Try using Asynchronous Javascript Call (AJAX) instead of XMLHttpRequest. This will help you to load data asynchronously which means that even if the the result coming form server take time you can still execute your other javascript codes.

With AJAX implemented, let say you want to fetch 10 Posts at one time, then after fetching first 10 posts, you can print the data for those 10 using JavaScript and simultaneously make a call for another 10.

Prepare a successCallBack function, where you will parse the data received and put that as required for your HTML. You will need to append the posts, so that when the next AJAX returns the result, that gets appended after the last post.

http://www.jquery4u.com/demos/ajax/