Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client - Creating the skeleton of the client-side application layer: defining generic JavaScript functions
(Page 4 of 4 )
Now that you have the CSS code and the (X)HTML markup that will render the application's user interface, all that remains is to define the structure of the JavaScript functions that will integrate the whole POP3 client application. For this reason, here's the list of the relevant functions:
// requests the PHP file that fetches messages from mail server
function sendHttpRequest(){
// code for fetching PHP file goes here
}
// displays email messages on the web page
function fetchMessages(){
// code for displaying email messages goes here
}
// get form data in the format
'variable1=value1&variable2=value2&....variableN=valueN;
function getFormValues(){
// code for getting form values goes here
}
// performs initialization tasks, assigns event handlers and
resets page contents
function initializeUserPanel(){
// code for setting up user panel goes here
}
There we go! With only four JavaScript functions, this small POP3 client will be capable of fetching messages straight from the mail server and displaying them right on the web-based user interface that I just created. Now, let's quickly go over the tasks assigned to each function, so you can easily understand what they do.
The first function, "sendHttpRequest()," is responsible for fetching the PHP file that will push raw POP3 commands into the mail server. For obvious reasons, this process will be triggered once the user has entered the name of the server (or its IP address), in conjunction with his/her credentials, that is, the username/password combination.
Naturally, the "fetchMessages()" function is tasked with displaying email messages on the web page, including eventually all the responses generated on the server, while the "getFormValues()" function is used for getting all the form data entered by the user, prior to establishing a connection to the mail server.
Finally, the "initializeUserPanel()" function performs some useful initialization tasks, such as assigning "onclick" event handlers to control buttons, and resetting the content of the message containing DIV, each time a new connection to the mail server is established. After briefly describing the tasks of each JavaScript function that integrates the POP client, you'll probably agree with me that the logic of the application is very easy to follow, so at the time of coding the complete client-side application layer, you shouldn't have any problems grasping its core functionality.
A final note: If you're not inclined to wait for the next article of the series to see how the POP3 client works, you can download the sample files here or at the beginning of this article.
Bottom line
All right, I have finished defining the generic structure of this simple web-based POP3 client program. Hopefully, this first tutorial has been instructive enough for creating the look and feel of the application, as well as for defining the skeleton of each client-side function.
However, this is only a short goodbye. In the next article, I'll show you the complete source code for all the JavaScript functions that comprise the application layer. So, see you there!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 90 
