Home arrow XML arrow Page 2 - 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 - Connecting to the mail server: defining the "sendHttpRequest()" function
(Page 2 of 6 )

In order to make things really simple, the process for connecting to the mail server will be performed using AJAX, which means having to work with "XMLHttpRequest" objects, and some of their useful properties. This way, all the connection tasks can be handled without troubling the application too much with complex JavaScript code.

That said, here is the "sendHttpRequest()" function, which for obvious reasons, will request the PHP file responsible for connecting to the mail server and fetching email messages. Its definition is as follows:

function sendHttpRequest(url,callbackFunc,respXml){
    var xmlobj=null;
    try{
        xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e){
            alert('AJAX isn't supported by your browser!');
            return false;
        }
   }
   xmlobj.onreadystatechange=function(){
        if(xmlobj.readyState==4){
            if(xmlobj.status==200){
                respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval
(callbackFunc+'(xmlobj.responseText)');
            }
        }
   }
   // open socket connection
   xmlobj.open('POST',url,true);
   // send http header
   xmlobj.setRequestHeader('Content-Type','application/x-www-
form-urlencoded; charset=UTF-8');
   // get form values and send http request
   xmlobj.send(getFormValues(document.getElementsByTagName
('form')[0]));
}

If you've ever used AJAX within your Web applications, the above function should be pretty familiar to you. As you can see, it takes three input parameters: the URL which the script will be pointed to (url), the name of the callback function to be called up when the http request has been completed (callbackFunc), and finally an XML flag (respXML), which indicates to the function whether server data should be fetched as XML or not.

Having explained the meaning of the incoming arguments, let's see how they're used inside the function. The main purpose of the function is only to fetch a PHP file from the Web server; then it instantiates an "XMLHttpRequest" object, after solving the pertinent incompatibilities between Internet Explorer and the other browsers.

Now, take a deep breath and put your head to work for a minute: remember that the connection area I created within the user interface was designed as a simple web form? Fine, so the function must send out the data entered on this form to establish the connection to the mail server. This is done simply by triggering a POST request to the server and specifying the corresponding HTTP header that tells the server to treat the data as submitted by a regular form.

Here there's something worth noting. Take a look at the line below:

xmlobj.send(getFormValues(document.getElementsByTagName('form')
[0]));

As you can see, the function sends the POST request, after collecting the values entered on the form, by utilizing the "getFormValues()" function. This takes the form in question and extracts its values to be transmitted to the server. But, in fact I am getting ahead of myself because this function hasn't been defined yet. Thus, after explaining how the "sendHttpRequest()" function works, it's time to write down this new function.


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