Home arrow XML arrow Page 4 - Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client
XML

Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client


In this article, the first of three parts, you will start creating a simple web-based POP 3 client using AJAX, which will use "XMLHttpRequest" objects to retrieve messages from a mail server.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 126
March 29, 2006
TABLE OF CONTENTS:
  1. · Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client
  2. · Styling the web-based POP 3 client: writing the CSS declarations
  3. · Defining the POP3 client's structure: coding the (X)HTML markup
  4. · Creating the skeleton of the client-side application layer: defining generic JavaScript functions

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
XML ARTICLES

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials