Take AJAX to your Email Inbox: Developing the Client-side Application Layer - Displaying email messages: defining the "fetchMessages()" function

(Page 4 of 6 )

Before you can see how this function does its thing, first allow me to clarify one point, so the function's source code will be easier to understand. Notice that the "sendHttpRequest()" function that I wrote previously has the ability to invoke a callback function for processing the server response, after the HTTP request has been completed. In this case, I'll use "fetchMessages()" as the proper callback function to be called up when the email messages have been fetched from the mail server, in order to display them right on the web page.

Now that you know the purpose of this function and how it fits into the application, take a look at its definition:

function fetchMessages(messages){
    // build message array
    var messages=messages.split('||||');
    var mdiv=document.getElementById('mailcontainer');
    if(!mdiv){return};
    // display mail server response
    mdiv.innerHTML=messages[0];
    // get 'previous' button
    var prev=document.getElementsByTagName('form')[1].elements
['prev'];
    if(!prev){return};
    // get 'next' button
    var next=document.getElementsByTagName('form')[1].elements
['next'];
    if(!next){return};
    // get 'clear' button
    var clear=document.getElementsByTagName('form')[1].elements
['clear'];
    if(!clear){return};
    // move message pointer back
    prev.onclick=function(){
        index--;
        if(index<0){index=0};
        mdiv.innerHTML=messages[index];
    }
    // move message pointer forward
    next.onclick=function(){
        index++;
        if(index==messages.length){index=messages.length-1};
        mdiv.innerHTML=messages[index];
    }
    // clear mail container
    clear.onclick=function(){mdiv.innerHTML=''};
}

There are some interesting things worth noting about the function above. The first one is that it accepts the email messages as the only input argument, in this case represented by the "messages" parameter, for processing at a later time. Perhaps processing email messages may be a confusing task, since the PHP code that runs on the server hasn't been written yet. However, don't feel concerned about it, because I'll be explaining this in detail in the last part of the series.

For the moment, it's enough to know that all the email messages will be fetched in a string format by the "responseText" property of the corresponding requester object, and then stored as an array structure, where each message is an array element. This task is easily performed by splitting the messages through the "||||" delimiter (four pipe characters), which will allow the messages to be manipulated individually.

This process is shown by the line below:

var messages=messages.split('||||');

Here, careful attention must be paid, since there may be subtle differences in the formats that messages are dispatched by distinct POP3 mail servers. To make sure the retrieval of messages will work on most POP 3 servers, I'll use the four-pipe delimiter, but you can use a different one, according to the particularities of each server.

The rest of the function's code is quite easy to follow. Since all the messages will be displayed within the "mailcontainer" DIV, which was defined in the first tutorial, the function will show the initial server response, stored as the first element of the "messages" array (messages[0]), and then will assign the respective behaviors to each navigational button.

In order to go back and forth across messages, the "prev" and "next" buttons will increment or decrement an "index" message pointer each time they're clicked on, which will result in displaying one message at once. As you can see, this navigation mechanism is very simple and effective.

Similarly, the "Clear" button resets the contents of the "mailcontainer" DIV, by using the following function:

clear.onclick=function(){mdiv.innerHTML=''};

Right, as you've seen, the "fetchMessages()" function performs some useful tasks, such as displaying email messages and implementing a simple navigation system, which results in a functional message panel. So, are we done? Well, not so fast. I still need to define the last function of the POP3 application, aimed at initializing the POP3 client, after the web page has been loaded. Thus, let's tackle the final part of the tutorial.

Next: Initializing the POP3 client: defining the "initializeUserPanel()" function >>
 

More XML Articles
More By Alejandro Gervasio

Comments On: Take AJAX to your Email Inbox: Developing the Client-side Application Layer

· In this second article, all the JavaScript functions that comprise that client-side...   >>> Post your comment now!