Building the Behavioral Layer of an SMTP Client with Prototype - Using the Prototype JavaScript library
(Page 3 of 4 )
Undoubtedly, one of the most relevant modules that comprises this SMTP application is the one that deals with triggering HTTP requests to the web server. These requests are made to run a simple PHP script that sends out the email message when the user submits the web form included in the user interface.
Please note that the application must perform some additional tasks, such as collecting the data entered in the different form fields, and obviously submitting the form. Even though these processes sound rather complex to perform, the truth is that they're all executed by a few simple JavaScript functions which use the functionality provided by the Prototype package.
Having explained the set of tasks that must be performed by the application to convert the front end of the email client into a completely functional interface, below I listed the JavaScript functions that are responsible for carrying out those tasks.
Here are the signatures of the functions, so have a look at them, please:
// attach handler to window object
Event.observe(window,'load',initializeEmailClient,false);
// initialize email application
function initializeEmailClient(){
Event.observe
($('resetbutton'),'click',clearMessageField,false);
Event.observe('mailform','submit',sendEmail);
}
// reset 'message' field to send email
function clearMessageField(){
Field.clear($('message'));
}
// send http request
function sendEmail(e){
var params='to='+$F('to')+'&subject='+$F('subject')+'&cc='+$F
('cc')+'&bcc='+$F('bcc')+'&message='+escape($F('message'));
var xmlobj=new Ajax.Updater('state','send_email.php',{method:
'get',parameters: params});
// prevent form from submitting
Event.stop(e);
}
Wasn't that great? I bet it was! As you can see, the short JavaScript code shown above is all the client-side programming required to make the SMTP client work.
First, the previous script starts using the powerful "Event.observe" object that come bundled with the Prototype library to perform some useful initialization tasks. These include attaching the "clearMessageField()" function to the form button identified as "resetbutton," and submitting the corresponding web form when a user sends a new message.
However, the workhorse of the above JavaScript functions is the one called "sendEmail()." This function is responsible for requesting a PHP file named "send_email.php," which will be tasked with sending the email message to the specified recipients.
In addition, the signature of this relevant function is listed below, so you can see more clearly how it uses the Prototype's $F function to collect the data entered by the user, and then utilizes the "AJAX.Updater" object (also packaged with the library) to fetch the "send_email.php" PHP file that I mentioned above:
// send http request
function sendEmail(e){
var params='to='+$F('to')+'&subject='+$F('subject')+'&cc='+$F
('cc')+'&bcc='+$F('bcc')+'&message='+escape($F('message'));
var xmlobj=new Ajax.Updater('state','send_email.php',{method:
'get',parameters: params});
// prevent form from submitting
Event.stop(e);
}
Okay, after having explained how all the previous JavaScript functions do their business, it's time to see how these functions can be integrated into the CSS styles and structural markup that were created in the first article of the series. This will complete the client module of the SMTP application.
As usual, to see the full client-side code that corresponds to this Prototype-based email program, please click on the link that appears below and keep reading. Don't you worry, because we're almost finished!
Next: Listing the full source code for the SMTP client >>
More JavaScript Articles
More By Alejandro Gervasio
