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

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
  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

Sending Email with AJAX: Developing the Client-Side Application Layer - Initializing the AJAX email application: defining the “initializeEmailClient()” function
(Page 5 of 5 )

As you’ve seen before, each control button included within the application’s user interface triggers a specific process, either for fetching files from the server or for executing tasks on the client. For this reason, I need to define the “initializeEmailClient()” function, which precisely assigns “onclick” event handlers to those buttons and ties them to the respective JavaScript functions. Take a look at this function’s signature:

function intitializeEmailClient(){
        var sendbtn=document.getElementsByTagName('form')
        // assign 'onlick' event handler to 'send' button
            // display message
[1].firstChild.data='STATUS: SENDING MESSAGE...';
            // send email request
        var clearbtn=document.getElementsByTagName('form')
        // assign 'onlick' event handler to 'clear message' button
('h1')[1].firstChild.data='STATUS: COMPOSING NEW MESSAGE'};
        var contactbtn=document.getElementsByTagName('form')
        // assign 'onlick' event handler to 'contact' button
        var addbtn=document.getElementsByTagName('form')
        // assign 'onlick' event handler to 'add Contact' button
        // display contact list

Briefly, the above function adds the appropriate behaviors to each control button, so the user interface becomes completely functional now. In addition, since this function is called after loading the web document, the contact list is retrieved and displayed in turn by invoking the “getContactList()” function.

Of course, the script wouldn’t be complete without instantiating the respective requester objects that fetch the PHP and XML files from the server, so they’re created below:

// instantiate email XMLHttpRequest object
var emailXMLHttpObj=getXMLHttpRequestObject();
// instantiate contact XMLHttpRequest object
var contactXMLHttpObj=getXMLHttpRequestObject();
// instantiate insert XMLHttpRequestObject
var insertXMLHttpObj=getXMLHttpRequestObject();

And finally, the “initializeEmailClient()” function is called up after the web page has been loaded, like this:


Well, at this stage I’ve provided you with all the JavaScript functions that compose the client-side application layer of this AJAX-based email program. I hope you enjoy testing and tweaking the code, so it can work specifically for you. Have a good time!

Bottom line

In this tutorial, hopefully you’ve learned how the JavaScript building blocks of the AJAX email program fit each other. Aside from using regular functions, the overall development process has been instructive for illustrating a simple approach for working with multiple requester objects across the sample application.

However, as you know, the program isn’t complete yet. Over the last part of the series, I’ll turn attention to the server-side programming, by coding the PHP snippet that collects data from the client and actually sends the appropriate email messages. See you in the last article!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials