Pagination without refresh using a "MORE" link

I've noticde some websites like Twitter do not have the usual paginations. Instead, it has the "MORE" link. When it is clicked, it shows开发者_StackOverflow中文版 more tweet below without refreshing the page.

How does this technique work?

It requests via XHR the next set of results, loads them, and then inserts the HTML (via DOM methods or HTML serialised) into the page.

If you know nothing about what I described above, start your journey learning about XMLHttpRequest.

This can be done with jQuery.

Here is the page update mechanism:

$('.more').click( function() {

     $(this).before('<div><h2>Post 3</h2><p>Content</p></div>');

});

Demo at: http://jsfiddle.net/WCprC/33/

However the content needs to be fetched from the server with something like .get()

The pagination system works almost similarly on server-side (slice an array, set an offset, etc.) however, instead of rendering the complete layout with the content, they only return a chunk of html.

It is then a combination of two techniques:

• Ajax which uses XMLHttpRequest to fetch data from server
• DOM and its method which is used to manipulate the HTML tree.

(thanks to David Dorward for pointing me out the lake of accuracy)