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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Take AJAX to your Email Inbox: Developing the Client-side Application Layer - Initializing the POP3 client: defining the "initializeUserPanel()" function
(Page 5 of 6 )

As I mentioned before, there's still one last function to be defined, in order to initialize the POP3 client. This function, which I called "initializeUserPanel()," is defined as follows:

function initializeUserPanel(){
    // get 'connect' button
    var sendbtn=document.getElementsByTagName('form')[0].elements
['connect'];
    // send http request when button is clicked on
    sendbtn.onclick=function(){

        // send request & fetch messages from POP3 server
        sendHttpRequest('pop_processor.php','fetchMessages');
        // display 'Retrieving...' message
        var mdiv=document.getElementById('mailcontainer');
        if(!mdiv){return};
        mdiv.innerHTML='Retrieving messages from the server...';
    }
}

In the simplest sense, all the above function does is tie the "sendHttpRequest()" function to the "connect" button, so the HTTP request will be triggered when the user clicks on it. Notice how I passed, as parameters, the PHP file responsible for connecting and retrieving email messages, along with the callback function ("fetchMessages()"), which processes and displays the messages on the web page.

The last thing the function does is simply display the legend "Retrieving messages from the server..." while the processes for connecting to the mail server and retrieving messages are running in the background.

At this point, I provided you with all of the JavaScript functions that comprise this web-based POP3 client, which means in basic terms that we have now developed the whole client-side application layer. That said, it's time to summarize what you learned until now and list the full source code of the JavaScript application. Don't worry. It's only a few lines away.


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