Take AJAX to your Email Inbox: Developing the Client-side Application Layer - Connecting to the mail server: defining the "sendHttpRequest()" function
(Page 2 of 6 )
In order to make things really simple, the process for connecting to the mail server will be performed using AJAX, which means having to work with "XMLHttpRequest" objects, and some of their useful properties. This way, all the connection tasks can be handled without troubling the application too much with complex JavaScript code.
That said, here is the "sendHttpRequest()" function, which for obvious reasons, will request the PHP file responsible for connecting to the mail server and fetching email messages. Its definition is as follows:
function sendHttpRequest(url,callbackFunc,respXml){
var xmlobj=null;
try{
xmlobj=new XMLHttpRequest();
}
catch(e){
try{
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert('AJAX isn't supported by your browser!');
return false;
}
}
xmlobj.onreadystatechange=function(){
if(xmlobj.readyState==4){
if(xmlobj.status==200){
respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval
(callbackFunc+'(xmlobj.responseText)');
}
}
}
// open socket connection
xmlobj.open('POST',url,true);
// send http header
xmlobj.setRequestHeader('Content-Type','application/x-www-
form-urlencoded; charset=UTF-8');
// get form values and send http request
xmlobj.send(getFormValues(document.getElementsByTagName
('form')[0]));
}
If you've ever used AJAX within your Web applications, the above function should be pretty familiar to you. As you can see, it takes three input parameters: the URL which the script will be pointed to (url), the name of the callback function to be called up when the http request has been completed (callbackFunc), and finally an XML flag (respXML), which indicates to the function whether server data should be fetched as XML or not.
Having explained the meaning of the incoming arguments, let's see how they're used inside the function. The main purpose of the function is only to fetch a PHP file from the Web server; then it instantiates an "XMLHttpRequest" object, after solving the pertinent incompatibilities between Internet Explorer and the other browsers.
Now, take a deep breath and put your head to work for a minute: remember that the connection area I created within the user interface was designed as a simple web form? Fine, so the function must send out the data entered on this form to establish the connection to the mail server. This is done simply by triggering a POST request to the server and specifying the corresponding HTTP header that tells the server to treat the data as submitted by a regular form.
Here there's something worth noting. Take a look at the line below:
xmlobj.send(getFormValues(document.getElementsByTagName('form')
[0]));
As you can see, the function sends the POST request, after collecting the values entered on the form, by utilizing the "getFormValues()" function. This takes the form in question and extracts its values to be transmitted to the server. But, in fact I am getting ahead of myself because this function hasn't been defined yet. Thus, after explaining how the "sendHttpRequest()" function works, it's time to write down this new function.
Next: Collecting connection data: defining the "getFormValues()" function >>
More XML Articles
More By Alejandro Gervasio
/ 6 
