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.
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.
Introduction
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.
XML 
/ 114 
