How to append the output of a servlet using JQuery

I am currently making a website. Basically when the user scrolls to the bottom of the screen I am going to download another 10 posts (I'm making a little social network). To do this I have downloaded JQuery. The following JavaScript is ran when the user scrolls to the bottom of the page:

page++;
var next = 'posts?page=' + page;
$('.pContainer').append("code that loads the servlet in the next var goes here");

Ins开发者_开发知识库ide the posts servlet I have a few out.println statements to test this. I have tried using JSP: Include tags inside the append brackets but it does not work.

Have you tried to use an ajax call?

page++;
var next = 'posts?page=' + page;
$.get(next, function (data) {
    $('.pContainer').append(data);
});

This requests a page and appends the data returned from the page.

Documentation: http://api.jquery.com/jQuery.get/

You should use a plugin; just search for 'jQuery lazy load'.

You can always build your own, but it's not worth the hassle. I think the concept behind it is to calculate the position of a bottom element, say #bottom-bar, and if it is above a certain threshold, say less than 200px below the bottom of the page, you would load elements on top of it until it is pushed down further.

Scrolling would be the trigger that makes it load more items.

additional details: (not tested)

$(window).scroll(function (){
    if ($(this).scrollTop() + 500 > $('#bottom-bar').offsest().top) {
        var newcontent = $('<div class="content"></div>');
        newcontent.load('http://source.of.data.com', function(data) {
            $('#bottom-bar').before(newcontent);
        });
    }
});