Home arrow XML arrow Page 4 - Take AJAX to your Email Inbox: Developing the Client-side Application Layer

Take AJAX to your Email Inbox: Developing the Client-side Application Layer

Welcome to part two of the series “Take AJAX to your email inbox.” If the article’s title doesn’t ring any bells for you, let me tell you that this tutorial series goes through the making of a simple web-based POP3 client, which uses AJAX for pulling out email messages from a given mail server, and displays them right on a web page.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 16
April 05, 2006
  1. · Take AJAX to your Email Inbox: Developing the Client-side Application Layer
  2. · Connecting to the mail server: defining the "sendHttpRequest()" function
  3. · Collecting connection data: defining the "getFormValues()" function
  4. · Displaying email messages: defining the "fetchMessages()" function
  5. · Initializing the POP3 client: defining the "initializeUserPanel()" function
  6. · Integrating the POP 3 client: listing the complete source code of the application

print this article

Take AJAX to your Email Inbox: Developing the Client-side Application Layer - Displaying email messages: defining the "fetchMessages()" function
(Page 4 of 6 )

Before you can see how this function does its thing, first allow me to clarify one point, so the function's source code will be easier to understand. Notice that the "sendHttpRequest()" function that I wrote previously has the ability to invoke a callback function for processing the server response, after the HTTP request has been completed. In this case, I'll use "fetchMessages()" as the proper callback function to be called up when the email messages have been fetched from the mail server, in order to display them right on the web page.

Now that you know the purpose of this function and how it fits into the application, take a look at its definition:

function fetchMessages(messages){
    // build message array
    var messages=messages.split('||||');
    var mdiv=document.getElementById('mailcontainer');
    // display mail server response
    // get 'previous' button
    var prev=document.getElementsByTagName('form')[1].elements
    // get 'next' button
    var next=document.getElementsByTagName('form')[1].elements
    // get 'clear' button
    var clear=document.getElementsByTagName('form')[1].elements
    // move message pointer back
    // move message pointer forward
    // clear mail container

There are some interesting things worth noting about the function above. The first one is that it accepts the email messages as the only input argument, in this case represented by the "messages" parameter, for processing at a later time. Perhaps processing email messages may be a confusing task, since the PHP code that runs on the server hasn't been written yet. However, don't feel concerned about it, because I'll be explaining this in detail in the last part of the series.

For the moment, it's enough to know that all the email messages will be fetched in a string format by the "responseText" property of the corresponding requester object, and then stored as an array structure, where each message is an array element. This task is easily performed by splitting the messages through the "||||" delimiter (four pipe characters), which will allow the messages to be manipulated individually.

This process is shown by the line below:

var messages=messages.split('||||');

Here, careful attention must be paid, since there may be subtle differences in the formats that messages are dispatched by distinct POP3 mail servers. To make sure the retrieval of messages will work on most POP 3 servers, I'll use the four-pipe delimiter, but you can use a different one, according to the particularities of each server.

The rest of the function's code is quite easy to follow. Since all the messages will be displayed within the "mailcontainer" DIV, which was defined in the first tutorial, the function will show the initial server response, stored as the first element of the "messages" array (messages[0]), and then will assign the respective behaviors to each navigational button.

In order to go back and forth across messages, the "prev" and "next" buttons will increment or decrement an "index" message pointer each time they're clicked on, which will result in displaying one message at once. As you can see, this navigation mechanism is very simple and effective.

Similarly, the "Clear" button resets the contents of the "mailcontainer" DIV, by using the following function:


Right, as you've seen, the "fetchMessages()" function performs some useful tasks, such as displaying email messages and implementing a simple navigation system, which results in a functional message panel. So, are we done? Well, not so fast. I still need to define the last function of the POP3 application, aimed at initializing the POP3 client, after the web page has been loaded. Thus, let's tackle the final part of the tutorial.

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