Sending Email with AJAX: Developing the Client-Side Application Layer

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.