Home arrow HTML arrow Page 4 - Sending Email with AJAX: Interacting with the Server
HTML

Sending Email with AJAX: Interacting with the Server


Here we are again. Welcome to the last tutorial of the series “Sending email with AJAX.” As you may have guessed regarding the title, this three-part series explains the development of a fairly simple AJAX-driven email client application, which offers some interesting capabilities for sending email, as well as for displaying and adding contacts, all without the need to involve page reloads.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
January 31, 2006
TABLE OF CONTENTS:
  1. · Sending Email with AJAX: Interacting with the Server
  2. · Sending email with PHP: developing a straightforward script
  3. · Getting the server-side application layer completed: listing the “addcontact.php” PHP file
  4. · Putting the layers together: listing the application’s source code, first section
  5. · Listing the application's source code, second section

print this article
SEARCH DEVARTICLES

Sending Email with AJAX: Interacting with the Server - Putting the layers together: listing the application’s source code, first section
(Page 4 of 5 )

If you feel inclined to copy the complete code of the application and study it, then this is a good time to do precisely that. Here’s the source code for AJAX-driven email client, starting with the “ajaxmail.htm” file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>AJAX-DRIVEN MAIL CLIENT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1">
<script language="javascript">
//*****************************************
//
// Description: Ajax-driven email client
// Author: Alejandro Gervasio
// Version: 1.0
//
//*****************************************
// getXMLHttpRequest object
function getXMLHttpRequestObject(){
    var xmlobj;
    // check for existing requests
    if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
        xmlobj.abort();
    }
    try{
        // instantiate object for Mozilla, Nestcape, etc.
        xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            // instantiate object for Internet Explorer
            xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e){
            // Ajax is not supported by the browser
            xmlobj=null;
            return false;
        }
    }
            return xmlobj;
}
// request 'sendmail.php' file - sends email message
function sendEmailRequest(){
    var message=document.getElementsByTagName('form')[1].elements
['message'].value;
    if(message.length>1000){message=message.substring(0,1000)};
    // open socket connection
    emailXMLHttpObj.open('POST','sendmail.php',true);
    // set form http header
    emailXMLHttpObj.setRequestHeader('Content-
Type','application/x-www-form-urlencoded; charset=UTF-8');
    // get form values and send http request
    emailXMLHttpObj.send(getFormValues
(document.getElementsByTagName('form')[1]));
    emailXMLHttpObj.onreadystatechange=emailStatusChecker;
}
// check status of email requester object
function emailStatusChecker(){
    // if mail request is completed
    if(emailXMLHttpObj.readyState==4){
        if(emailXMLHttpObj.status==200){
            // if status == 200 display server response
            displayServerResponse();
        }
        else{
            alert('Failed to get
response :'+emailXMLHttpObj.statusText);
        }
    }
}
// display server response
function displayServerResponse(){
    var status=document.getElementsByTagName('h1')[1].firstChild;
    if(!status){return};
    // display messages by <h1> header
    status.data=emailXMLHttpObj.responseText; 
}
// get form values
function getFormValues(fobj){
    var str='';
    for(var i=0;i< fobj.elements.length;i++){
        str+=fobj.elements[i].name+'='+ escape(fobj.elements
[i].value)+'&';
    }
    str=str.substr(0,(str.length-1));
    return str;
}          
// get contact list
function getContactList(){
    // request 'contact.xml' file
    contactXMLHttpObj.open('GET','contacts.xml',true);
    contactXMLHttpObj.setRequestHeader('Content-
Type','text/xml');
    contactXMLHttpObj.send(null);
    contactXMLHttpObj.onreadystatechange=contactStatusChecker;
}
// check status of contact requester object
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);
        }
    }
}
// display list of contacts
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);
}
// add new contact
function addContact(){
    // create containing div
    var cdiv=document.createElement('div');
    // create 'fullname' field
    var fullname=document.createElement('input');
    fullname.setAttribute('type','text');
    fullname.setAttribute('name','fullname');
    fullname.setAttribute('value','Enter Full Name');
    fullname.className='contfield';
    fullname.onfocus=function(){this.value=''};
    // create 'email' field
    var emailaddr=document.createElement('input');
    emailaddr.setAttribute('type','text');
    emailaddr.setAttribute('name','email');
    emailaddr.setAttribute('value','Enter Email Address');
    emailaddr.className='contfield';
    emailaddr.onfocus=function(){this.value=''};
    // create 'done' button
    var donebtn=document.createElement('input');
    donebtn.setAttribute('type','button');
    donebtn.setAttribute('name','sendcontact');
    donebtn.setAttribute('value','Done');
    donebtn.className='mailbutton';
    // append form fields to containing div
    cdiv.appendChild(fullname);
    cdiv.appendChild(emailaddr);
    cdiv.appendChild(donebtn);
    // get 'addContact" button
    addbtn=document.getElementsByTagName('form')[0].elements
['add'];
    // replace 'addContact' button with div
    addbtn.parentNode.replaceChild(cdiv,addbtn);
    // insert contact into 'contacts.xml' file
    donebtn.onclick=function(){
        insertXMLHttpObj.open('POST','addcontact.php',true);
        // set form http header
        insertXMLHttpObj.setRequestHeader('Content-
Type','application/x-www-form-urlencoded; charset=UTF-8');
        // get form values and send http request
        insertXMLHttpObj.send(getFormValues
(document.getElementsByTagName('form')[0]));
        // replace back containing div with 'addContact" button
        cdiv.parentNode.replaceChild(addbtn,cdiv);
        // refresh contact list
        getContactList();
    }
}
// fill form field with contact values
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};
}
// initialize email client
function intitializeEmailClient(){
    if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
        var sendbtn=document.getElementsByTagName('form')
[1].elements['send'];
        if(!sendbtn){return};
        // assign 'onlick' event handler to 'send' button
        sendbtn.onclick=function(){
            // display message
            document.getElementsByTagName('h1')
[1].firstChild.data='STATUS: SENDING MESSAGE...';
            // send email request
            sendEmailRequest();     
        }
        var clearbtn=document.getElementsByTagName('form')
[1].elements['clear'];
        if(!clearbtn){return};
        // assign 'onlick' event handler to 'clear message'
button
        clearbtn.onclick=function(){document.getElementsByTagName
('h1')[1].firstChild.data='STATUS: COMPOSING NEW MESSAGE'};
        var contactbtn=document.getElementsByTagName('form')
[1].elements['contact'];
        if(!contactbtn){return};
        // assign 'onlick' event handler to 'contact' button
        contactbtn.onclick=getContactList;
        var addbtn=document.getElementsByTagName('form')
[0].elements['add'];
        // assign 'onlick' event handler to 'add Contact' button
        addbtn.onclick=addContact;                      
        // display contact list
        getContactList();
    }
}
// instantiate email XMLHttpRequest object
var emailXMLHttpObj=getXMLHttpRequestObject();
// instantiate contact XMLHttpRequest object
var contactXMLHttpObj=getXMLHttpRequestObject();
// instantiate insert XMLHttpRequestObject
var insertXMLHttpObj=getXMLHttpRequestObject();
window.onload=intitializeEmailClient;
</script>
<style type="text/css">
body {
            margin: 0;
            padding: 0;
}
h1 {
            font: bold 16px Arial, Helvetica, sans-serif;
            margin: 5px;
}
a:link,a:visited {
            display: block;
            width: 120px;
            padding: 2px 0 2px 5px;
            font: bold 12px Verdana, Arial, Helvetica, sans-
serif;
            color: #00f;
            text-decoration: none;
            border: 1px solid #cc3;
}
a:hover {
            color: #f33;
            background: #fff;
            border: 1px solid #000;
}
form {
            display: inline;
}
textarea {
            width: 575px;
            height: 380px;
            margin-left: 5px;
            background: #ffc;
            border: 1px solid #000;
}
#container {
            width: 800px;
            height: 572px;
            padding: 5px;
            margin-left: auto;
            margin-right: auto;
            background: #cc9;
            border: 1px solid #000;
}
#mailsection{
            float: left;
            width: 590px;
            height: 570px;
            margin-left: 5px;
            background: #cc3;
            border: 1px solid #000;
}
#contsection {
            float: left;
            width: 200px;
            height: 570px;
            background: #cc3;
            border: 1px solid #000;
            overflow: auto;
}
.mailfield {
            width: 575px;
            height: 20px;
            margin: 0 0 5px 5px;
            border: 1px solid #000;
            background: #ffc;
            font: bold 11px Verdana, Arial, Helvetica, sans-
serif;
            color: #000;
}
.mailbutton {
            width: 120px;
            height: 25px;
            margin-left: 5px;
            font: bold 11px Verdana, Arial, Helvetica, sans-
serif;
            color: #000;
}
.contfield {
            width: 185px;
            height: 20px;
            margin: 0 0px 5px 5px;
            border: 1px solid #000;
            background: #ffc;
            font: bold 11px Verdana, Arial, Helvetica, sans-
serif;
            color: #000;
}
</style>
</head>
<body>
<div id="container">
<div id="contsection">
<h1>CONTACT LIST</h1>
<form>
<input name="add" type="button" value="Add Contact"
class="mailbutton" title="Add new contact" />
</form>
</div>
<div id="mailsection">
<h1>STATUS: COMPOSING NEW MESSAGE</h1>
<form>
<input name="subject" type="text" value="SUBJECT: "
class="mailfield" title="Enter message's subject" />
<input name="to" type="text" value="TO: " class="mailfield"
title="Enter recipient's email address" />
<input name="cc" type="text" value="CC: " class="mailfield"
title="Enter email address for carbon copy" />
<input name="bcc" type="text" value="BCC: " class="mailfield"
title="Enter email address for blind carbon copy" />
<textarea name="message" title="Type your message
here" /></textarea>
<input name="send" type="button" value="Send Message"
class="mailbutton" title="Send Message" />
<input name="clear" type="reset" value="Clear Message"
class="mailbutton" title="Clear Message" />
<input name="contact" type="button" value="Display Contacts"
class="mailbutton" title="Display Contact List" />
</form>
</div>
</div>
</body>
</html>


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