Preloading Data with Ajax and JSON ...

Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed fancy-pants technology. In an effort to help you take it up a notch, we’d like to share a method for helping your site anticipate a user’s next move.
On most sites, there are usually only a handful of options that can be done at any given moment and often some of these options are more likely than others. By determining what is important on each page, we can preload the data of the user’s next action and store it on the client with JSON. When the user decides to perform their next action, they’ll see their results almost instantly because the info was loaded in the background.

See It In Action

As always, we’ve created a little demonstration for you to observe, illustrate, and dissect. It’s a paging demo that shows how we can preload in the background the next and previous queries from a database. When the user pages through, they can do so quickly without having to wait for an Ajax call to finish.

Download the code

Also note that this demo and the tutorial that follows use the Prototype.js framework along with our own custom database class. You’ll find both in the zip file above.

JSON

Before we get started on the paging, let’s take a quick look at JavaScript Object Notation, or JSON. JSON is a data interchange format, similar to XML, which is built using JavaScript. The easiest way to get your head around it is to imagine the format as a variable containing multiple arrays that can be nested endlessly. Implementing JSON in JavaScript is simple and the official documentation actually does a great job illustrating lots of examples. For this tutorial, we will be returning a string of JSON from the server, and that string will contain our preloaded data. The only tricky part is that once the data is fetched, we’ll have to convert it into a JavaScript object after the client receives it. To do that, we’ll use eval().

currentPage = eval(( + response.responseText + ));

The JavaScript line above makes use of the eval function, which converts the properly formatted string from the server into a JavaScript object. Once that is ready to go, the rest is easy. Now, if you’re not comfortable using JSON, you can always use XML instead. To compare the two, check out PPK’s review. That man never stops doing his homework.

Determining What to Preload

Once we know how to store our data, we’ll want to determine what kind of data we’d like to store. As far as I am aware, any amount of data can be stored on the client side. It is all dependent on the client computer (however, do correct me if I am wrong). Chances are, we don’t wish to crash the client, so the choice of and amount of data becomes important. For example, an online store with hundreds of thousands of products may not want to load every single product into client memory. Likewise, loading millions of records of data that need to be paged is also not ideal, so for this example we just set up a simple next and previous page to always be preloaded.

Getting Started

To set up a paging system, we need to know a few things: the total amount of records, the current page, the next page, the previous page, and the paging size. Starting from the initial page load, here is what needs to happen:

    * Grab the total amount of records so we know how many total pages there might be.
    * Grab the first page of data and display it to the user.
    * Grab the next page of data and store it as JSON on the client.

No previous page of data is needed, since record 0 is always loaded first. Let’s take a look at each step individually.

Total Records

To get the total amount of records possible, we need to create a basic query that returns the value to the client.

function getRecordCount() {
    $db     = new database();
    $sql    = "SELECT COUNT(*) AS recordCount FROM Accounts";
    $rs     = $db->query($sql);
    $row    = mysql_fetch_array($rs, MYSQL_ASSOC);
    echo    $row[ arecordCount];
}

This function simply gets the record count and prints the value. The following Ajax call retrieves the value:

function getRecordCount() {
    var myAjax = new Ajax.Request(
        flow.php?action=count,
        {
            method: get,
            parameters: ,
            onComplete: function(response) {
            recordCount = response.responseText;
        }
    });
}

The global variable, recordCount, is now initialized. Also, note that the parameter, action. in the querystring, is used to tell the server what action to perform. In this case, it told the server to return the record count.

Get Initial Data

Once the user first hits the page, we need to show them the first page of data. To do that, we have to do a few things. First, let’s look at the function that will draw out the HTML that the user sees.

function drawTable(page, contain) {
    table =     <table>;
    alt = ;
    for(i = 0; i < page[players].length; i++) {
        table +=         <tr class="+alt+"> +
                         <td> + page[players][i].lastName   + ,</td> +
                         <td> + page[players][i].firstName  + </td> +
                         <td> + page[players][i].position   + </td> +
                         </tr>;
        (alt == )
            ?   alt = alt
            :   alt = ;
    }

    table += </table>;
    contain.innerHTML = table;
}

This function creates a table, and inserts it as the innerHTML of an element with the ID of container. You’ll notice when the table is drawing, it is looping through an object named page. The next step is to take a look at the page object. The page object is a string of data that the server returned to the client, and the client then converted into a JSON object. On the server side, the data is retrieved and displayed like this:

function getTableData() {
    $ret = {"players" :[;
    $db     = new database();
    $sql    = "SELECT * FROM Accounts LIMIT ".$_GET[current].", ".$_GET[ isize];
    $rs     = $db->query($sql);

    while($row  = mysql_fetch_array($rs, MYSQL_ASSOC)) {
        $ret .= { "firstName" : ".$row[FirstName].", "lastName" : ".$row[LastName].", "position"  : ".$row[Position]." }, ;
    }

    $ret = rtrim($ret, , ).]}; 
    echo $ret;
}

Then, using the eval() function mentioned earlier:

currentPage = eval(( + response.responseText + ));

We convert the server response into a JavaScript object that looks like this:

{ "players" : [
               { "firstName" : "Ryan", "lastName" : "Campbell", "position" : "S" },
               { "firstName" : "Chris", "lastName" : "Campbell", "position" : "QB" },
               { "firstName" : "Kevin", "lastName" : "Hale", "position" : "DT" }
           ]}

Once the object is created, the drawTable() function just loops through all players and displays their information. So now the user is viewing the initial data, and we wish to preload the next set of data. To do this, we only have to recreate what we just did, and not call the drawTable() function. Also, we need to store the response in a variable called nextPage instead of currentPage.

Paging

At this point, we have the user viewing the current page of data, and that data is stored in a JSON object named currentPage. We also have the next page of data stored in a JSON object named nextPage. So, when the user clicks the “next page” button, we want to do a few things:

function getNextPage() {
    currentRecord += pagingSize;

Increase the current record by the paging size. If they were viewing records 0 - 20, and they hit “next page,” the current record will be increased by 20, making the next set 20 - 40.

    showNavigation();

Explained below, this function hides and shows the previous and next buttons as necessary.

    previousPage = currentPage;

We know the previous page will become the current page, since the current page is advancing one. No need to hit the server to get previous data—just change the variables.

    currentPage = nextPage;

nextPage was preloaded into a JSON object, so we can now set the current page to the next page.

    drawTable(currentPage, $(view));

Draw the new currentPage to the screen.

    getNextData();
}

Preload the new nextPage. This will work until the last page is hit. When a user clicks “previous page,” the same thing happens in reverse order.

Controlling the Navigation

The last thing to do is hide the “next page” button if the user is on the last page, and hide the “previous page” button if they are on the first. The following function should do the trick:

function showNavigation() {
    (currentRecord == 0)
        ?   $(previousLink).style.visibility = hidden
        :   $(previousLink).style.visibility = visible;
    ((currentRecord + pagingSize) >= recordCount)
        ?   $( extLink).style.visibility = hidden
        :   $( extLink).style.visibility = visible;
}

Basically, this function just changes the style based on the currentRecord. If we’re at 0, then we’re on the first page. If the currentRecord equals the pagingSize (or total number of pages), then we’re on the last. Hide and show as deemed fit.

Improvements and Possibilities

Lately, I have found JavaScript to be fairly stable except when a user spams an action. The same problem applies here. If a user spams the “next page” button, the code may get thrown off. In order to prevent this problem, I sometimes find it necessary to create global variables, such as isActive, that prevents anything from happening until the variable is false. Other than that, everything should work out fine when preloading data.

I also mentioned earlier on that a store could use this technique. Right now, Ajax is fast, but it’s not instant since it still has to hit the server. By storing the current page of cart items on the client, you could add to the cart instantly and the user would have no wait while browsing through products. The store example and the example I used here both emphasize heavy sets of data, but it’s important to also realize that this can be used for trivial things like preparing the next set of HTML the user will see, or allowing for mass saving at the end of multiple actions rather than saving each individual action as it happens.

As always, we’d love to hear about some more possible uses of this technique, and suggestions for improving it are always welcome.