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

As I mentioned before, there's still one last function to be defined, in order to initialize the POP3 client. This function, which I called "initializeUserPanel()," is defined as follows:

function initializeUserPanel(){
    // get 'connect' button
    var sendbtn=document.getElementsByTagName('form')[0].elements
['connect'];
    // send http request when button is clicked on
    sendbtn.onclick=function(){

        // send request & fetch messages from POP3 server
        sendHttpRequest('pop_processor.php','fetchMessages');
        // display 'Retrieving...' message
        var mdiv=document.getElementById('mailcontainer');
        if(!mdiv){return};
        mdiv.innerHTML='Retrieving messages from the server...';
    }
}

In the simplest sense, all the above function does is tie the "sendHttpRequest()" function to the "connect" button, so the HTTP request will be triggered when the user clicks on it. Notice how I passed, as parameters, the PHP file responsible for connecting and retrieving email messages, along with the callback function ("fetchMessages()"), which processes and displays the messages on the web page.

The last thing the function does is simply display the legend "Retrieving messages from the server..." while the processes for connecting to the mail server and retrieving messages are running in the background.

At this point, I provided you with all of the JavaScript functions that comprise this web-based POP3 client, which means in basic terms that we have now developed the whole client-side application layer. That said, it's time to summarize what you learned until now and list the full source code of the JavaScript application. Don't worry. It's only a few lines away.