Home arrow HTML arrow Page 3 - Sending Email with AJAX: Developing the Client-Side Application Layer
HTML

Sending Email with AJAX: Developing the Client-Side Application Layer


Welcome to part two of the series “Sending email with AJAX.” In three parts, this series goes through the making of a simple web-based email application. It uses AJAX as the driving technology for fetching the files responsible for sending email from the server, as well as for adding and updating contacts.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 22
January 24, 2006
TABLE OF CONTENTS:
  1. · Sending Email with AJAX: Developing the Client-Side Application Layer
  2. · Sending email with AJAX: defining the “email sender” module
  3. · Displaying contacts: defining the “contact listing” module
  4. · Adding new contacts: defining the “contact insertion” module
  5. · Initializing the AJAX email application: defining the “initializeEmailClient()” function

print this article
SEARCH DEVARTICLES

Sending Email with AJAX: Developing the Client-Side Application Layer - Displaying contacts: defining the “contact listing” module
(Page 3 of 5 )

As I said before, the whole process of listing contacts is handled by a different requester object. In the simplest sense, this new object will fetch the contacts directly from an XML file, which is very convenient for my purposes of storing and retrieving contact information. However, if you feel more comfortable working with a database table, you shouldn’t have any trouble adapting the server files for interacting with MySQL or another RDBMS. To illustrate the structure of a typical XML file for storing contact information, here’s an example:

<?xml version="1.0" encoding="iso-8859-1"?>
<contactlist>
<contact>
<name>Contact 1</name>
<email>address1@domain1.com</email>
</contact>
<contact>
<name>Contact 2</name>
<email> address2@domain2.com </email>
</contact>
<contact>
<name>Contact 3</name>
<email> address3@domain3.com </email>
</contact>
</contactlist>

Now, by returning to the definition of the “contact listing” module, here is the signature for the “getContactList()” function, tasked with fetching the corresponding XML file that stores contact data:

function getContactList(){
    // request 'contacts.xml' file
    contactXMLHttpObj.open('GET','contacts.xml',true);
    contactXMLHttpObj.setRequestHeader('Content-
Type','text/xml');
    contactXMLHttpObj.send(null);
    contactXMLHttpObj.onreadystatechange=contactStatusChecker;
}

Here, you can see how a different requester object, that is “contactXMLHttpObject” sends a GET http request in order to fetch the “contacts.xml” file, which contains a few simple nodes, handy for storing the full name and email address of each contact respectively. Also, the progress of this request is handled by another useful function, “contactStatusChecker()”, which you can see below:

function contactStatusChecker(){
    // if request of 'contacts.xml' file is completed
    if(contactXMLHttpObj.readyState==4){
        if(contactXMLHttpObj.status==200){
            // if status == 200 display contact list
            displayContacts();
        }
        else{
            alert('Failed to get
response :'+contactXMLHttpObj.statusText);
        }
    }   
}

In this case, the “contactStatusChecker()” function looks very similar to the one I used for checking the status of email requests, something that turns it into a very understandable piece of code. As you can see, the callback function responsible for displaying the list of contacts is “displayContacts()”, so let’s get rid of irrelevant explanations and see how it looks. Its definition is shown below:

function displayContacts(){
    var cdiv=document.getElementById('contactlist')?
document.getElementById('contactlist'):document.createElement('div');
    cdiv.setAttribute('id','contactlist');
    // reset contacts container
    cdiv.innerHTML='';
    // read 'contacts.xml' file
    var contacts=contactXMLHttpObj.responseXML.getElementsByTagName
('contact');
    if(!contacts){return};
    var ul=document.createElement('ul');
    for(var i=0;i<contacts.length;i++){
        // create contact links
        var li=document.createElement('li');
        var a=document.createElement('a');
        // get 'email' value
        var email=contacts[i].getElementsByTagName('email')
[0].firstChild.nodeValue;
        // add 'href' attribute
        a.setAttribute('href','#');
        // add 'title' attribute
        a.setAttribute('title',email);
        // add contact labels
        a.appendChild(document.createTextNode(contacts
[i].getElementsByTagName('name')[0].firstChild.nodeValue));
        // fill form fields when contact is clicked on
        a.onclick=function(){fillEmailFields(this.title)};
        li.appendChild(a);
        ul.appendChild(li);
        cdiv.appendChild(ul);
    }
    // append contact links to web document
    document.getElementById('contsection').appendChild(cdiv);
}

Despite its rather lengthy source code, the above function performs a few comprehensive tasks. First, it creates a containing DIV element and reads the contents of the pertinent XML contact file, by using the corresponding “responseXML” property of the current requester object. Then, it loops over each file node and creates an unordered list of links, where each of them displays the contact’s full name and shows her/his email address in the form of a “title” attribute. Finally the whole list is appended to the document tree.

Additionally, you can see that each contact link is assigned the “fillEmailFields()” function. This function will populate any blank form field included within the message composing section with the email address corresponding to the link that’s being clicked. While this isn’t a key feature of the application, I decided to include it, in order to improve the program’s overall usability. Of course, the signature for this function is as follows:

function fillEmailFields(email){
    var to=document.getElementsByTagName('form')[1].elements
['to'];
    if(!to){return};
    var cc=document.getElementsByTagName('form')[1].elements
['cc'];
    if(!cc){return};
    var bcc=document.getElementsByTagName('form')[1].elements
['bcc'];
    if(!bcc){return};
    if(to.value=='TO: '||!to.value){to.value='TO:
'+email;return};
    if(cc.value=='CC: '||!cc.value){cc.value='CC:
'+email;return};
    if(bcc.value=='BCC: '||!bcc.value){bcc.value='BCC:
'+email;return};
}

As I mentioned before, this function populates, in descending order, any blank field within the message composing section, whenever a contact link is clicked. In accordance to this, the first clicked link will populate the “TO” field, the second one will populate the “CC” field, while the third one will fill the “BCC” field. I guess you now understand how this process is performed, in order to facilitate populating message fields.

Now that you’ve seen how the “contact listing” module works, it’s time to leap forward and define the module responsible for adding new contacts to the XML file. Thus, keep on reading to learn more about this.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

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