Using AJAX to add results to the bottom of a page - php

Question

I have some code that iterates through some database results and displays them, as such...
Note: article item.php just echoes the results with some formatting.
<ul class="post-column">
<?php
foreach ($data as $lineitem):
$type = $lineitem['type'];
if($type == "article"){
require('php/articleitem.php');
}
endforeach;
?>
</ul>
When I get to the bottom of the page, I want to do an AJAX DB call to get further results...
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700) {
startpoint = startpoint + 10;
processing = true;
$.ajax({
url: "AJAX/moritems.php",
type: "post",
async: false,
//this is where we define the data that we will send
data: {
startpoint: startpoint,
},
success: function (data) {
},
});
processing = false;
}
I want to then use the DB results to display more data below the data I've already displayed on the screen, but because I've displayed the result thus far in PHP, how would I do that? Would I have to use AJAX to load a new php page with results, then use javascript to add it to the existing page at the bottom of the results?

Answer 1

The answer is yes. Example:
function load() {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
if(xmlhttp.status == 200){
document.getElementById("myDiv").innerHTML += xmlhttp.responseText;
}
else if(xmlhttp.status == 400) {
alert('There was an error 400')
}
else {
alert('something else other than 200 was returned')
}
}
}
xmlhttp.open("GET", yoururl, true);
xmlhttp.send();
}
You need to define yoururl and link the function to the click event of your paging button or run it when you scroll.