Creating a Dynamic Scrollbar for an AJAX-based Pagination System

In fact, once the programming logic of the dynamic scroll bar that you learned before has been correctly implemented, fetching silently chunks of database records is a straightforward process that can be easily achieved by some no-brainer JavaScript functions.

As you know, AJAX allows you to send HTTP requests in the background with extreme ease, so that's exactly what I'll do for retrieving packets of records, in this way implementing an easy-to-grasp pagination system.

Since all the HTTP requests will be handled by the corresponding requester objects, below I defined the "get getXMLHttpRequestObject()" function, which acts as an object factory, and returns XMLHttpRequest objects when called. Please take a look at the following code listing:

// return XMLHttpRequest objects
function getXMLHttpRequestObject(){
    var xmlobj;
    // check for existing requests
    if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
        xmlobj.abort();
    }
    try{
        // instantiate object for Mozilla, Nestcape, etc.
        xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            // instantiate object for Internet Explorer
            xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e){
            // Ajax is not supported by the browser
            xmlobj=null;
            return false;
        }
    }
    return xmlobj;
}

The above function demonstrates a typical approach for creating XMLHttpRequest objects in a cross-browser fashion, hiding all the complexities involved in the object instantiation process behind its structure.

Since the above code is possibly quite familiar to you, please pay attention to the definition of following function, which certainly is the most significant one:

// send http request
function sendHttpRequest(offset){
    // open socket connection
    xmlobj.open('GET','getdata.php?offset='+offset,true);
    // set http header
    xmlobj.setRequestHeader('Content-Type','text/html; charset=UTF-8');
    xmlobj.onreadystatechange=xmlobjStatusChecker;
    // send request
    xmlobj.send(null);
}

If you examine the above "sendHttpRequest()" function, then you'll see that it takes up only one argument, called "offset." Before you scratch your head asking yourself about the meaning of this parameter, let me tell you what it does. In short, the argument in question will be used on the server by a PHP script (placed within the "getdata.php" file), in order to fetch chunks of database records using the popular "LIMIT" MySQL clause. Obviously, the "offset" parameter will be utilized in combination with the number of records being retrieved at a single time, in this way implementing an AJAX-based pagination system. Isn't that simple?

Assuming that you now grasped the logic behind the pagination system, please have a look at the following functions, which are tasked with checking the status of the aforementioned HTTP requests, along with displaying the corresponding database records:

// check status of requester object
function xmlobjStatusChecker(){
    // if http request is completed
    if(xmlobj.readyState==4){
        if(xmlobj.status==200){
            // if status == 200 display database records
            displayData();
        }
        else{
            alert('Failed to get response :'+xmlobj.statusText);
        }
    }
}

// display database records
function displayData(){
    var div=document.getElementById('datacontainer');
    if(!div){return};
    div.innerHTML='';
    var rows=xmlobj.responseText.split('|');
    for(var i=0;i<rows.length-1;i++){
        var p=document.createElement('p');
        p.appendChild(document.createTextNode(rows[i]));
        div.appendChild(p);
    }
}

As I mentioned before, the first function, "xmlobjStatusChecker()," is responsible for verifying the status of all the HTTP requests triggered during the execution of the pagination application, while the second one, that is "displayData()," will populate the "datacontainer" DIV with all the records fetched from the respective database table. In this particular case, I opted to show the data wrapped up by paragraphs, but you can easily modify this option and pick up another tag for displaying database information.

Well, at this point I showed you all the JavaScript functions that comprise the client-side layer of this AJAX-driven pagination application. But, as in most cases it's preferable to have the full source code available in one place, in the next few lines I'll list the complete client-side code for the program. Thus, click on the below link and continue reading.