Home arrow HTML arrow Page 4 - 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 - Adding new contacts: defining the “contact insertion” module
(Page 4 of 5 )

The process for adding a new contact to the corresponding list is fairly simple to understand. So, first take a look at the “addContact()” function, so you can see how this task is performed:

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();
    }
}

Here, the above function actually does a few interesting things worth noting. Since this function is fired when the respective “Add Contact” button is pressed, it creates a two-field online form on the fly, where the user can enter the full name for the new contact, along with the corresponding email address. After entering this information, the data is submitted by triggering a POST request to the “addcontact.php” file, which is responsible for adding the new contact to the XML file that you saw earlier. Notice how the whole contact insertion process is handled by the third “insertXMLHttpObj” requester object that I mentioned previously. With reference to the simple PHP file that adds a new contact to the XML file in question, its source code is as follows:

$file='contacts.xml';
$str='<contact>'."\n".'<name>'.$_POST
['fullname'].'</name>'."\n".'<email>'.$_POST
['email'].'</email>'."\n".'</contact>'."\n".'</contactlist>';
if(!$fp=fopen($file,'r+')){
    trigger_error('Error opening contacts file',E_USER_ERROR);
}
$contents=fread($fp,filesize($file));
rewind($fp);
$contents=str_replace('</contactlist>',$str,$contents);
fwrite($fp,$contents);
fclose($fp);

The above PHP snippet simply opens the “contacts.xml” file, and inserts the contact data as a new file node, which makes inserting a new contact a really easy task.

At this point, and after having explained how new contacts are added to the corresponding XML file, it’s time to define the last module of the AJAX email application, which takes care of performing some useful initializing tasks. To figure out how this is achieved, jump into next section.


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