Sending Email with AJAX: Developing the Client-Side Application Layer - Displaying contacts: defining the “contact listing” module
(Page 3 of 5 )
As I said before, the whole process of listing contacts is handled by a different requester object. In the simplest sense, this new object will fetch the contacts directly from an XML file, which is very convenient for my purposes of storing and retrieving contact information. However, if you feel more comfortable working with a database table, you shouldn’t have any trouble adapting the server files for interacting with MySQL or another RDBMS. To illustrate the structure of a typical XML file for storing contact information, here’s an example:
<?xml version="1.0" encoding="iso-8859-1"?>
<contactlist>
<contact>
<name>Contact 1</name>
<email>address1@domain1.com</email>
</contact>
<contact>
<name>Contact 2</name>
<email> address2@domain2.com </email>
</contact>
<contact>
<name>Contact 3</name>
<email> address3@domain3.com </email>
</contact>
</contactlist>
Now, by returning to the definition of the “contact listing” module, here is the signature for the “getContactList()” function, tasked with fetching the corresponding XML file that stores contact data:
function getContactList(){
// request 'contacts.xml' file
contactXMLHttpObj.open('GET','contacts.xml',true);
contactXMLHttpObj.setRequestHeader('Content-
Type','text/xml');
contactXMLHttpObj.send(null);
contactXMLHttpObj.onreadystatechange=contactStatusChecker;
}
Here, you can see how a different requester object, that is “contactXMLHttpObject” sends a GET http request in order to fetch the “contacts.xml” file, which contains a few simple nodes, handy for storing the full name and email address of each contact respectively. Also, the progress of this request is handled by another useful function, “contactStatusChecker()”, which you can see below:
function contactStatusChecker(){
// if request of 'contacts.xml' file is completed
if(contactXMLHttpObj.readyState==4){
if(contactXMLHttpObj.status==200){
// if status == 200 display contact list
displayContacts();
}
else{
alert('Failed to get
response :'+contactXMLHttpObj.statusText);
}
}
}
In this case, the “contactStatusChecker()” function looks very similar to the one I used for checking the status of email requests, something that turns it into a very understandable piece of code. As you can see, the callback function responsible for displaying the list of contacts is “displayContacts()”, so let’s get rid of irrelevant explanations and see how it looks. Its definition is shown below:
function displayContacts(){
var cdiv=document.getElementById('contactlist')?
document.getElementById('contactlist'):document.createElement('div');
cdiv.setAttribute('id','contactlist');
// reset contacts container
cdiv.innerHTML='';
// read 'contacts.xml' file
var contacts=contactXMLHttpObj.responseXML.getElementsByTagName
('contact');
if(!contacts){return};
var ul=document.createElement('ul');
for(var i=0;i<contacts.length;i++){
// create contact links
var li=document.createElement('li');
var a=document.createElement('a');
// get 'email' value
var email=contacts[i].getElementsByTagName('email')
[0].firstChild.nodeValue;
// add 'href' attribute
a.setAttribute('href','#');
// add 'title' attribute
a.setAttribute('title',email);
// add contact labels
a.appendChild(document.createTextNode(contacts
[i].getElementsByTagName('name')[0].firstChild.nodeValue));
// fill form fields when contact is clicked on
a.onclick=function(){fillEmailFields(this.title)};
li.appendChild(a);
ul.appendChild(li);
cdiv.appendChild(ul);
}
// append contact links to web document
document.getElementById('contsection').appendChild(cdiv);
}
Despite its rather lengthy source code, the above function performs a few comprehensive tasks. First, it creates a containing DIV element and reads the contents of the pertinent XML contact file, by using the corresponding “responseXML” property of the current requester object. Then, it loops over each file node and creates an unordered list of links, where each of them displays the contact’s full name and shows her/his email address in the form of a “title” attribute. Finally the whole list is appended to the document tree.
Additionally, you can see that each contact link is assigned the “fillEmailFields()” function. This function will populate any blank form field included within the message composing section with the email address corresponding to the link that’s being clicked. While this isn’t a key feature of the application, I decided to include it, in order to improve the program’s overall usability. Of course, the signature for this function is as follows:
function fillEmailFields(email){
var to=document.getElementsByTagName('form')[1].elements
['to'];
if(!to){return};
var cc=document.getElementsByTagName('form')[1].elements
['cc'];
if(!cc){return};
var bcc=document.getElementsByTagName('form')[1].elements
['bcc'];
if(!bcc){return};
if(to.value=='TO: '||!to.value){to.value='TO:
'+email;return};
if(cc.value=='CC: '||!cc.value){cc.value='CC:
'+email;return};
if(bcc.value=='BCC: '||!bcc.value){bcc.value='BCC:
'+email;return};
}
As I mentioned before, this function populates, in descending order, any blank field within the message composing section, whenever a contact link is clicked. In accordance to this, the first clicked link will populate the “TO” field, the second one will populate the “CC” field, while the third one will fill the “BCC” field. I guess you now understand how this process is performed, in order to facilitate populating message fields.
Now that you’ve seen how the “contact listing” module works, it’s time to leap forward and define the module responsible for adding new contacts to the XML file. Thus, keep on reading to learn more about this.
Next: Adding new contacts: defining the “contact insertion” module >>
More HTML Articles
More By Alejandro Gervasio
