基于AJAX技术开发Web电子邮件客户端之编码篇

一、简介

在第一篇中，我们构建了本系列文章总目标—POP3客户端—的用户接口。为了创建该邮件应用程序的基本的可视化结构，我定义了(X)HTML标记以及相应的CSS声明。另外，我还概括了组成这个客户端应用程序层的每个函数的一般性定义。其实，这些函数负责实现很多功能，例如请求把POP3命令发送到邮件服务器的PHP文件，控制前面我们所定义的用户接口中的每一个组件的行为，等等。

在从邮件服务器提取将显示于Web页面的邮件消息之前，我必须开发适当的JavaScript层以允许我把一些功能添加到这个POP3程序的前端，因为你一定很想知道如何从客户端应用程序内部建立一个到邮件服务器的连接，以及怎样在作为用户接口的一部分的导航按钮上添加相应的行为。

在本篇中，我将完整地定义你在第一篇所看到的JavaScript函数。我希望，到本文最后你会拥有一组能够从一个给定的邮件服务器取回将显示在Web页面上的消息的函数。你还应该能够创建一种简单的导航机制，用于在消息之间前后切换。

要明确了本文的目标后，让我们开始本系列演示程序的客户端层的具体的编码工作。

二、与邮件服务器连接—定义sendHttpRequest()函数

为了使得事情尽可能简单，连接到邮件服务器的过程是使用AJAX技术实现的。这意味着，我必须处理XMLHttpRequest对象及其相关属性。通过这种方式，所有的连接任务都可以得到处理，而不需要用太复杂的JavaScript代码扰乱整个应用程序。

下面，我们讨论函数sendHttpRequest()，它将对负责连接到邮件服务器的PHP文件发出请求，并且取回电子邮件消息。它的定义如下：

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)''); 
} 
} 
} 
//打开套接字连接
xmlobj.open(''POST'',url,true); 
//发送http头
xmlobj.setRequestHeader(''Content-Type'',''application/x-www- 
form-urlencoded; charset=UTF-8''); 
//取得表单值并且发送http请求
xmlobj.send(getFormValues(document.getElementsByTagName 
(''form'')[0])); 
}

如果你曾在以前的Web应用程序中使用过AJAX技术，那么你应该非常熟悉上面的函数。如你所见，它有三个输入参数：指向脚本的URL，在http请求完成时将被调用的回调函数名（callbackFunc），一个XML标记（respXML）—它向该函数指示是否服务器数据应该以XML格式取回。

在解释了输入参数的含义之后，让我们进一步分析如何在函数内使用它们。上面这个函数的主要目的是从Web服务器取回一个PHP文件；然后，它在解决了存在于Internet Explorer和其它浏览器之间的不匹配性之后，实例化一个XMLHttpRequest对象。

你应该还记得我在连接部分创建的用户接口被设计为一个简单的web表单。因此，该函数必须发送从该表单输入的数据以建立到邮件服务器的连接，这是通过激活一个到该服务器的POST请求并且指定相应的HTTP头（它告诉服务器就象通过一个常规表单提交的数据一样来处理该数据）来实现的。

在此，有一点值得注意。请看下列一行代码：

xmlobj.send(getFormValues(document.getElementsByTagName(''form'')
[0]));
如你所见，在使用getFormValues()函数收集完表单上的输入值之后，这个函数发送POST请求从而把从表单中提取的数据发送到服务器上。但是,我现在有点过急，因为这个函数目前还没有定义。因此，在解释了函数sendHttpRequest()的工作原理后，接下来我们要建立这个新函数。

三、收集连接数据—定义getFormValues()函数

如上所述，函数getFormValues()的功能是，在建立一个到邮件服务器的连接之后，取得用户输入的数据。也就是，取得邮件服务器的名字或IP地址，连同相应的用户名/口令组合（它们将被转换成“var1=value1&var2=value2...&varN=valueN”的形式）。

这一任务是很简单的，下面是这个函数的完整列表：

function getFormValues(fobj){ 
var str=''''; 
for(var i=0;i< fobj.elements.length;i++){ 
str+=fobj.elements[i].name+''=''+ escape(fobj.elements 
[i].value)+''&''; 
} 
str=str.substr(0,(str.length-1)); 
return str; 
}

在此,该函数接收待处理的Web表单作为一个输入参数并且循环遍历它的每一个域以取得相应的域数据。在遍历完表单数据之后，该函数把表单值以一种适当格式化的字符串返回到调用代码。

至此，我已经向你展示了，在提交正确的数据组合之后，该POP3客户端如何连接到邮件服务器。然而，假定该连接已经成功建立，那么如何把电子邮件消息显示到Web页面上呢？为了回答这个问题，我将定义另一个有用的函数fetchMessages()，它负责显示检索自邮件服务器的消息。

下面，让我们分析这个函数的工作原理。