Home arrow HTML arrow Page 2 - 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 - Sending email with AJAX: defining the “email sender” module
(Page 2 of 5 )

The first task involved in the creation of the pertinent client-side application layer rests in writing down all the JavaScript functions related to sending email messages and handling the responses received from the server. In this case, once a message has been submitted, the program will first fetch a PHP file called “sendmail.php”, which will take care of sending out the email, and then return to the client a specific response, whether the message has been sent successfully or not.

As you can see, this process is extremely simple, since it’s very similar to submitting a regular online form. I’ll begin by defining the first JavaScript function, “getXMLHttpRequestObject()”, which comes in useful for returning XMLHttpRequest objects. Here is its definition:

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

If XMLHttpRequest objects are pretty familiar to you, the above function shouldn’t be hard to understand at all. What it does, essentially, is return a new requester object each time it’s called up. Specifically, I’ve decided to code this function because I’ll use three different object across the application, which obviously will handle distinct tasks.

Even though this may sound like a resource-consuming process, I have a good reason for doing this. The first requester object will take care of handling all the tasks related to sending email messages; the second one will tackle all the operations regarding the insertion of new contacts; and finally, the third object will handle the process for displaying them. Simple and sweet.

Now, allow me to define another useful function, “sendEmailRequest()”, which is responsible for fetching the PHP file that actually sends email messages. Please take a look at its definition:

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

As the above function illustrates, all the email messages will be submitted to the “sendmail.php” PHP file, by sending a POST request to the server, after the data entered into the corresponding form has been collected. In this case, the progress of the respective http request is checked by the “emailStatusChecker()” function, so I’d like to show you how it looks. Its signature is listed below:

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

As you’ll agree, this function is pretty straightforward. In short, what it does is verify the status of the http POST request, after a message has been submitted (remember that email messages are handled by the “sendmail.php” PHP file). Once this file is fetched, the callback function “displayServerResponse()” is called in turn, which means that the process for sending email and receiving the respective server response is terminated by this new function. Thus, here is its short definition:

function displayServerResponse(){
    var status=document.getElementsByTagName('h1')[1].firstChild;
    if(!status){return};
    // display messages by <h1> header
    status.data=emailXMLHttpObj.responseText; 
}

Indeed, the above function seems to be a very simple thing. However, it performs a pretty useful task, since it displays the corresponding server response after submitting a new message, whether this has been successful or not. Notice how this response is handled by the “responseText” property of the email requester object, and displayed by an <h1> header, which as you’ll recall, is placed on top of the message composing section.

Well, the last function that you learned above completes what I called the “email sender” module of the AJAX application. So, the next step consists of defining the set of functions that compose the “contact listing” module, which takes care of displaying the list of contacts. Want to find out how these useful functions are defined? Right, let’s do it together.


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