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(){
if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
var sendbtn=document.getElementsByTagName('form')
[1].elements['send'];
if(!sendbtn){return};
// assign 'onlick' event handler to 'send' button
sendbtn.onclick=function(){
// display message
document.getElementsByTagName('h1')
[1].firstChild.data='STATUS: SENDING MESSAGE...';
// send email request
sendEmailRequest();
}
var clearbtn=document.getElementsByTagName('form')
[1].elements['clear'];
if(!clearbtn){return};
// assign 'onlick' event handler to 'clear message' button
clearbtn.onclick=function(){document.getElementsByTagName
('h1')[1].firstChild.data='STATUS: COMPOSING NEW MESSAGE'};
var contactbtn=document.getElementsByTagName('form')
[1].elements['contact'];
if(!contactbtn){return};
// assign 'onlick' event handler to 'contact' button
contactbtn.onclick=getContactList;
var addbtn=document.getElementsByTagName('form')
[0].elements['add'];
// assign 'onlick' event handler to 'add Contact' button
addbtn.onclick=addContact;
// display contact list
getContactList();
}
}
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:
window.onload=intitializeEmailClient;
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. |
