Home arrow XML arrow Page 3 - 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 - Defining the POP3 client's structure: coding the (X)HTML markup
(Page 3 of 4 )

At this time, you should hopefully have a clear idea of how the application's (X)HTML markup will be defined. Obviously, the top DIV container will house all the corresponding form fields used for entering mail server connection data, together with the button that triggers http requests to the Web server. This sounds really simple and understandable, so it bears no further discussion.

Similarly, the second containing DIV will be responsible for displaying the list of messages pulled from the server, along with all the possible responses that eventually the host might send back to the client. The only thing worth nothing with reference to this element is that the CSS selector tied to it includes the "overflow: auto;" declaration, which means that, in case the length of the message being displayed would be longer than the height of the pertinent DIV, a scroll bar will be added to it automatically.

Finally, the third DIV element will be used as a simple wrapper for the navigational buttons that you saw in the screenshot I showed previously.

After having schematized the visual structure of the web-based POP3 client, let's turn the theory into concrete code. Therefore, here's the corresponding (X)HTML markup, which gives consistency to the program's front-end:

<div id="serverinfo">
HOST <input name="host" type="text" class="inputbox" title="Enter
mail hostname/IP address" />
USER <input name="user" type="text" class="inputbox" title="Enter
username" />
PASSWORD <input name="pass" type="password" class="inputbox"
title="Enter password" />
<input name="connect" type="button" value="Connect"
class="formbutton" />
<div id="mailcontainer">
<div id="navbar">
<input name="prev" type="button" value="&lt;&lt Prev" class="formbutton" title="Previous message" />
<input name="next" type="button" value="Next &gt;&gt;" class="formbutton" title="Next message" />
<input name="clear" type="button" value="Clear" class="formbutton" title="Clear all messages" />

Here, I've defined the DIVs I mentioned before, in order to build the structure for the user interface. As described above, the upper DIV houses the form fields that will allow the user to enter mail server connection values, while the bottom DIV wraps up the fancy buttons for navigating back and forth across email messages. The last piece of structural markup rests on the "mailcontainer" DIV element, which, as you may have figured out, will show each of the messages retrieved from the specified server, and incidentally display its respective responses, whether or not the connection process or the retrieval of messages has been successful.

Considering the fact that I've defined the CSS declarations and the (X)HTML markup responsible for rendering the user interface of the mail client, the question is: what's coming up now? Well, over the next few lines I'll define the generic signature for each JavaScript function that integrates the whole web-based mail application, so you can understand its programming logic. Click the link below and keep on reading.

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