HTML
  Home arrow HTML arrow Page 4 - Sending Email with AJAX: Developing the Cl...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

Sending Email with AJAX: Developing the Client-Side Application Layer
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 3 stars3 stars3 stars3 stars3 stars / 10
    2006-01-24

    Table of Contents:
  • Sending Email with AJAX: Developing the Client-Side Application Layer
  • Sending email with AJAX: defining the “email sender” module
  • Displaying contacts: defining the “contact listing” module
  • Adding new contacts: defining the “contact insertion” module
  • Initializing the AJAX email application: defining the “initializeEmailClient()” function

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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.

    More HTML Articles
    More By Alejandro Gervasio


       · The second article of this series goes through the development of the required...
     

    HTML ARTICLES

    - Completing Construction of a Database Form w...
    - Maximizing and Restoring Images in a Tabular...
    - Building the Recordset for an HTML Database ...
    - Laying Out a Database Form with HTML
    - Tabular Database Form Functions with HTML
    - Tabular Database Forms with HTML
    - Using the Find Functions for HTML Database F...
    - Sorting for Database Forms with HTML
    - Edit and Other Database Form Functions with ...
    - More Database Form Functions with HTML
    - Database Form Functions with HTML
    - Using the HTML Table Element as a Recordset
    - Building Single Row Database Forms with HTML
    - Introduction to Database Forms with HTML
    - Another Look at Animation of Geographical Ma...






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway
    Stay green...Green IT