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

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
  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

Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client
(Page 1 of 4 )

A downloadable file for this article is available here.


Indeed, it isn't shocking news that AJAX has introduced considerable changes within the development of client-side Web applications. This brand new way of conceiving web programs, which send http requests in the background without page reloads, has brought a plethora of possible implementations for popular software that originally was designed and developed for running as desktop applications.

Do you want to build web-based FTP clients, chatters, or full-fledged email applications, running all the stuff on the same web page? Fine, pick up a good understanding of AJAX, learn about its properties and methods, then develop the corresponding back and front-ends, and hopefully you'll end up with a http program that does its work at least decently. Of course, it may not meet everyone's needs, but what's the rush? After all, you can boost it with little hard work and effort, which can turn the program into a robust, reusable library.

Admittedly, I got caught for the moment, since not all applications can be developed with the same ease. But there is enough room to write software that uses AJAX as the driving technology for doing all sorts of clever things, even when this means having to rethink - and fix - some issues related to accessibility and navigation between application states.

As you may have guessed, in this article I'll make my contribution to the developing AJAX universe, by creating a simple web-based POP 3 client, which will utilize "XMLHttpRequest" objects for retrieving messages from a given mail server. The application I plan to develop will use a simple front-end for connecting to the mail host, displaying the messages and navigating back and forth across them. On the server-side terrain, I'll use PHP for accessing the mail server, pushing POP3 commands and reading messages from the inbox, which implies having the possibility of switching over to your preferred language and using it to create the application.

With the formalities out of our way, it's time to begin building the web-based POP 3 client. Let's get started.

Controlling the look and feel: creating the application's user interface

The first step involved in the creation of the web-based POP 3 client rests on building the basic user interface. Stripped down to its bare bones, the building blocks of this interface will consist of three simple DIV elements, which will house the corresponding areas that comprise the mail client program. The first DIV box will contain the area for displaying the appropriate data fields. This will allow users to enter the usual information for connecting to the mail server, by specifying either its domain name or IP address, along with the name/password combination. For a better idea of how the overall user interface looks, below I've included a screenshot, which basically depicts its appearance:

As the image above illustrates, the web-based POP 3 client shows the classic data fields for connecting to the mail server, in addition to providing some basic controls for navigating back and forth between messages. Also, I've added a little extra functionality to the program by including a "Clear" button, which will come in useful for clearing the area where messages are conveniently displayed.

As you can appreciate, the user interface of my POP 3 client is very easy to use. Naturally, as you'll see later, both client and server-side application layers seamlessly support the development and implementation of an improved interface. However, for the educational purposes of this article, the functionality of the current one is more than enough.

Now, after providing you with an example of how the look and feel of the POP 3 client will be created, it's time to move on and see how the above image can be translated to a few CSS declarations and the corresponding structural (X)HTML markup. So, let's no waste more time and learn how this is done.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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