AJAX Emailer
This work is licensed under the Creative Commons Attribution Non-Commercial 2.0 UK: England & Wales Licence. This means that you are free to: copy; distribute; and modify this work. It also means that you cannot use it for commercial purposes. Additionally, you must attribute this work to the original author, Thomas Guymer, ideally with a link.
This page has an AJAX emailer for you to use so that you can recommend this page to a friend, simply fill in the form below and click 'Send'. Below the form I go through the source code for you and my usability findings.
Below is the source code for the JavaScript file which can be downloaded in the script archive, it features the AJAX request. It may be more complicated than other examples which can be found on the internet but you'll see that this script does not use browser profiling and also can work on pages which have been served with the application/xhtml+xml mime-type as the JavaScript function .innerHTML can only be used with the mime-type of text/html. As a result I have to use the fancy .firstChild.nodeValue method instead.
var ajaxObject;
var formObject = document.getElementById("emailer-form");
var responseObject = document.getElementById("emailer-response");
try {
ajaxObject = new XMLHttpRequest();
}
catch (e) {
try {
ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX.");
return false;
}
}
}
ajaxObject.onreadystatechange = function() {
if(ajaxObject.readyState == 1) {
formObject.sender.disabled = "disabled";
formObject.recipient.disabled = "disabled";
formObject.message.disabled = "disabled";
responseObject.className = "";
responseObject.firstChild.nodeValue = "The request has been set up...";
}
else if(ajaxObject.readyState == 4) {
formObject.sender.disabled = "";
formObject.recipient.disabled = "";
formObject.message.disabled = "";
if(ajaxObject.status == 200) {
responseObject.firstChild.nodeValue = ajaxObject.responseText;
responseObject.className = "";
}
else if(ajaxObject.status == 400) {
responseObject.firstChild.nodeValue = ajaxObject.responseText;
responseObject.className = "error";
}
else {
responseObject.firstChild.nodeValue = "Did not recieve an expected response, are you still connected to the internet?";
responseObject.className = "error";
}
}
}
var params = "sender=" + formObject.sender.value + "&recipient=" + formObject.recipient.value + "&message=" + formObject.message.value;
ajaxObject.open("POST","/path/to/emailer.php",true);
ajaxObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxObject.setRequestHeader("Content-length", params.length);
ajaxObject.setRequestHeader("Connection", "close");
ajaxObject.send(params);
}
...and below is the source code for the PHP file which can be downloaded in the script archive, it features the actual email sending function.
if(!empty($_POST["sender"]) && !empty($_POST["recipient"]) && !empty($_POST["message"])) {
if(strpos($_POST["sender"], "@") !== false && strpos($_POST["recipient"], "@") !== false) {
$subject = "A page has been recommended for you...";
$content = "The page " . $_SERVER["HTTP_REFERER"] . " was recommended to you by " . strip_tags($_POST["sender"]) . "\n\nThey had the following message for you:\n\n" . stripslashes(strip_tags($_POST["message"])) . "\n\n----------\n\nwww.example.com is not responsible for the content of this email.";
$content = wordwrap($content, 70);
if(mail(strip_tags($_POST["recipient"]), $subject, $content, "From: " . strip_tags($_POST["sender"]))) {
header("HTTP/1.0 200 OK");
echo "The message was sent successfully.";
}
else {
header("HTTP/1.0 400 Bad Request");
echo "The message was not sent successfully, this is not your fault.";
}
unset($subject,$content);
}
else {
header("HTTP/1.0 400 Bad Request");
echo "Valid email addresses were not provided.";
}
}
else {
header("HTTP/1.0 400 Bad Request");
echo "No sender nor recipient nor message were specified.";
}
?>
Doing my own tests I have found that:
| Browser | AJAX Emailer Works? |
|---|---|
| Firefox 3 | Yes |
| IE7 | Yes |
| IE8 Beta 2 | Yes |
| Konqueror 3.5 | Yes |
| Opera 9.5 | Yes |
| Safari 3.1 | Yes |
ZIP Archive (1.4KB)
Do you want to say 
