Automatic updates process in JavaScript like Facebook old friend status updates

I would like to write in english on this website, it’s now done. This first post deals with JavaScript and asynchronous request (AJAX) to make the Facebook effect at the bottom of the timeline. An automatic process updates the timeline with old friend status when we reach the bottom of the page.

This process is pretty cool and i would like to get a similar stuff on my website. In theory, we just have to get scroll positions and page height. Once we get these values, we have to determine where we are in the page. If we reach the bottom, an asynchronous request gets old posts and we just have to display them below.

I chose to attach an event listener on the scroll event. I used this code :

if(window.addEventListener)
window.addEventListener("scroll", changePager, false);
else if (window.attachEvent)
window.attachEvent("onscroll", changePager);
else window.onscroll = changePager;

Each time the user scrolls, an event is dispatched and the function below is called :

In this code, this.init is used as a static variable. It allows me to define a button at the bottom of the page the first time this function is called.

The function calculatePositions() returns the vertical scroll position and document.height returns the page height. If we reach the bottom, the function getMoreContent() is called.

We calculate vertical scroll position with this function :

getMoreContent() is the function that will send an asynchronous request using AJAX (JQuery) and will display old posts (got with the request data response) :

A static variable counts requests number. This variable is set to zero if no more posts are available (no datas received). The request is sent using JQuery :

var content_supp = $.ajax({ url: "http://.../articles/asyncSelect/" + this.deb + "/", async: false }).responseText;

content_supp contains html text, so we just have to add it under previous posts. I add a button like the first time we called changePager() and the previous button is hidden (Facebook like).

The advantage of this solution is that you improve your website performances, you don't refresh the whole page. If your request response returns one post at once, this solution can be completly transparent to users.

You can see the result on this website.