基于AJAX技术开发Web电子邮件客户端

keaide

为了在消息之间来回切换，“prev”和“next”按钮将在每次点击它们时增加或减少一个“索引”消息指针，这将导致每次立即产生一条新的消息。如你所见，这种导航机制很简单也很有效。

同样，通过使用下列的函数，“Clear”按钮重置“mailcontainer”DIV的内容：

clear.onclick=function(){mdiv.innerHTML=''};

如你所见，fetchMessages()函数执行一些非常有用的任务，例如显示电子邮件消息和实现一个简单的导航系统等。下面，我还需要定义该POP3应用程序的最后一个函数，用于实现在加载网页之后初始化该POP3客户端。下面我们讨论这个函数。

五、初始化POP3客户端—定义initializeUserPanel()函数

本节中的initializeUserPanel()函数负责初始化POP3客户端，下面是其定义：

function initializeUserPanel(){ //得到'connect'钮扣var sendbtn=document.getElementsByTagName('form')[0].elements ['connect']; //在点击按钮时发送http请求sendbtn.onclick=function(){//发送请求并从POP3服务器取回消息sendHttpRequest('pop_processor.php','fetchMessages'); //显示'Retrieving...'消息var mdiv=document.getElementById('mailcontainer'); if(!mdiv){return}; mdiv.innerHTML='Retrieving messages from the server...'; } }

上面函数把sendHttpRequest()函数绑定到“connect”按钮上，以便当用户点击此按钮时激活HTTP请求。注意，在此我以一个参数形式传递负责连接和检索电子邮件消息的PHP文件，连接回调函数（fetchMessages()）—它负责处理并把消息显示于网页。

此函数的最后一项功能是，在处理到邮件服务器的连接和在后台运行消息检索时，显示消息“Retrieving messages from the server...”。

到目前为止，我向你展示了所有JavaScript函数—它们组成整个基于Web的POP3客户端，这也就意味着我们已经开发出整个的客户端应用程序层。有关完整的JavaScript函数的代码请参考本文所附源码文件（已经加入了详细的注解）。

六、小结

在本文中，我们分析了所有构成整个POP3客户端程序的JavaScript函数。然而,我们还需要连接到服务器端。为此，我们将在本系列的下一篇（最后）中讨论如何构建一个PHP文件以连接到POP3邮件服务器。

keaide

与邮件服务器通讯篇


一、简介

在本系列的第二篇中，我向你展示了所有构成整个POP3客户端的JavaScript函数。为了检索并在Web页面上显示电子邮件消息以及创建负责把适当的行为添加到每一个用户接口控件的函数，我定义了负责发送和处理HTTP请求的函数。

在第二篇的最后，我们创建了一个具有完整功能的客户端应用程序层。这个层能够请求PHP文件—它直接与一个指定POP3服务器对话并且提取要被显示的消息以显示于Web页面中。尽管我在上一篇中所开发的用户接口暴露了一些基本的控件用于可视化和消息之间导航，可能你想加入自己的新功能以创建一个更优秀的程序。为此，你可以在我提供的示例基础上加以改进，或者创建一种全新的接口，并提供更为复杂的导航控件，或者一种真正专业化的外观感觉。其实，如你所想象，这个程序中还存在大量可以扩展的地方。

在本文（最后一篇）中，我将把在上篇中创建的客户端应用程序层连接到邮件服务器并且执行POP3命令，从而检索电子邮件消息并把它显示于相应的网页上。为了实现这一目标，我将开发一个易于理解的PHP类，它提供了一些有用的方法来构建一个到POP3服务器的连接并负责提取其中的电子邮件消息。

下面，让我们开始创建这个PHP POP3处理类。

二、使用POP3服务器—定义POP3Processor类的基本框架

假定你已经正确理解了上一篇中定义的JavaScript函数，那么现在我们将专注于开发一个PHP类。这个类负责连接到邮件服务器，推入原始的POP3命令并且取回电子邮件消息列表以备将来显示之用。

为了实现以上任务，我开发的PHP类将暴露三个核心方法。第一个是构造器，它负责使用POP3认证命令建立一个到给定邮件服务器的连接。第二个类方法fetch()负责传送要求的命令以实现从收件箱中取回格式化的电子邮件消息列表。最后，close()方法将关闭到服务器的套接字连接。

keaide

与上面描述的任务相应，该POP3Processor类的基本框架可以按下列方式定义：

class POP3Processor{//连接到POP3服务器public function __construct(){//连接到POP3服务器的代码在此}//取回电子邮件消息public function fetch(){//检索电子邮件消息的代码在此}// 关闭邮件服务器连接public function close(){//关闭POP3邮件服务器连接的代码在此}}

如你所见，上面这个类的结构遵循通常规则，因此它是比较易读和易于理解的。当然，这也是这个类的唯一框架。接下来，我们必须定义每一个相关的类方法。首先，我们定义这个类的第一个方法。

三、连接到POP3服务器—定义POP3Processor类构造器方法

为了处理所有与连接到POP3服务器相关的操作，这个类使用了它的构造器方法。这个方法接受通常的连接到一个特定服务器的输入参数（也即它的名字或IP地址，以及名字/口令组合）。下面是这个方法的具体实现：

public function __construct($host，$user，$password){if(!$this->fp=fsockopen($host，110，$errno，$errstr，30)){throw new Exception('Failed to connect to POP3 server'.$errstr.$errno);}stream_set_timeout($this->fp，2);$this->output.=fgets($this->fp，128).'<br />';fputs($this->fp，"USER $usern";//发送USER命令$this->output.=fgets($this->fp，128).'<br />';fputs($this->fp，"PASS $passwordn";//发送PASS命令$this->output.=fgets($this->fp，128).'<br />';$this->output.='||||';//发送限界字符串}

如果你已经研究了上面的方法，那么你会发现它的实现逻辑相当简单。该方法实现的第一件事情是打开一个到TCP端口110（默认的POP3服务器端口号）的套接字连接—通过利用输入到这个方法的输入参数实现。如你所见，这个操作相当直接，所以在此我们不再作分析。

在打开一个到POP3服务器的连接后，事情变得越来越有趣了。请注意，为了执行相应的存取控制过程并得到随后由服务器发送回客户端的响应，这个方法先后发送“USER”和“PASS”命令。最后，该方法通过把四个管道字符串定界符传送到服务器来结束它的操作。它们将用于把所有的服务器响应（包括相关的电子邮件消息列表）分解成块。

至此，该构造器已经实现连接到POP3服务器，发送用户名/口令对并且接收在服务器上生成的响应。然而，如我前面所提到的，这个类还必须取回电子邮件消息列表以便于把这些消息可视化显示于客户程序接口中。在下一节中，我将定义另一个负责检索各个消息的类方法fetch()。

keaide

四、取回电子邮件消息—定义fetch()方法

如你在前面所见，与POP3服务器进行交互其实只需要把服务器能够理解的适当的命令注入到套接字中即可。遵循这一思路，fetch()类方法使用简单的POP3命令得到现存消息的完整列表。请看下面的定义：

public function fetch(){fputs($this->fp，"STATn";//发送STAT命令$ret=fgets($this->fp，128).'<br />';if(substr($ret，0，5)!='-ERR '){$messages=intval(substr($ret，4，1));for($i=1;$i<=$messages;$i++){fputs($this->fp，"RETR $in"; //发送RETR命令$this->output.=stream_get_contents($this->fp).'<br /><br />';//取回电子邮件消息$this->output.='||||';//发送限界字符串}}$this->output=substr($this->output，0，strlen($this->output)-4);return $ret.$this->output;}

上面的方法首先使用一个“STAT”命令检查服务器的状态，然后发送“RETR”命令，这个命令指示服务器检索存储在收件箱中的消息列表。如果在检索过程中没有任何错误发生，那么这个方法将利用“stream_get_contents()”PHP内置函数来读取每一条消息的内容，并在每一条内容后添加上当我定义类构造器时向你展示的四个管道定界符。

最后，这个方法以字符串形式返回完整的消息列表，并把它们存储在“$this->output”属性中以备后面处理。如你所见，从POP3服务器中取回电子邮件消息可能比你想象的要容易得多。事实上，这仅是发送适当的POP3命令的事情，因为它们可以被服务器正确解释。

至此，我提供的这个PHP类已经能够取回电子邮件消息（以一个常规字符串形式返回）。接下来，我需要定义另一个类方法close()，用于关闭到服务器的连接。

keaide

五、关闭到POP3服务器的连接—定义close()类方法

你可能已经猜出，这个close()类方法负责关闭到POP3服务器的套接字连接，而且这个方法的定义很短。实际上，它仅仅是PHP fclose()函数的一个简单的包装器，其具体实现代码如下：

public function close(){fputs($this->fp，"QUITn";fclose($this->fp);}

上面的方法向POP3服务器发出一个“QUIT”命令，这将导致该服务器与客户端程序的立即中断。另外，该方法也关闭句柄$this->fp—这个句柄是第一次建立到服务器的连接时建立的。

至此，我们定义了PHP类的所有方法。下面，让我们看一下它们是如何联合应用于一个类结构中的。很明显，这将有助于你更容易地理解这个类的工作原理。下面是这个POP3Processor类的完整定义：

class POP3Processor{//声明数据成员private $output='';private $fp;//构造器public function __construct($host，$user，$password){if(!$this->fp=fsockopen($host，110，$errno，$errstr，30)){throw new Exception('Failed to connect to POP3 server'.$errstr.$errno);}stream_set_timeout($this->fp，2);$this->output.=fgets($this->fp，128).'<br />';fputs($this->fp，"USER $usern";//发送USER命令$this->output.=fgets($this->fp，128).'<br />';fputs($this->fp，"PASS $passwordn";//发送PASS命令$this->output.=fgets($this->fp，128).'<br />';$this->output.='||||';//发送限界字符串}//取回电子邮件消息public function fetch(){fputs($this->fp，"STATn";//发送STAT命令$ret=fgets($this->fp，128).'<br />';if(substr($ret，0，5)!='-ERR '){$messages=intval(substr($ret，4，1));for($i=1;$i<=$messages;$i++){fputs($this->fp，"RETR $in"; //发送RETR命令$this->output.=stream_get_contents($this->fp).'<br /><br />';//取回电子邮件消息$this->output.='||||';//发送定界字符串}}$this->output=substr($this->output，0，strlen($this->output)-4);return $ret.$this->output;}//关闭邮件服务器连接public function close(){fputs($this->fp，"QUITn";fclose($this->fp);}}
下面是这个类的一种可能的实现：
try{//实例化POP3处理器对象$popProc=new POP3Processor('pop3hostname'，username'，'password');//从邮件服务器取回消息echo $popProc->fetch();//关闭邮件服务器连接$popProc->close();}catch(Exception $e){echo $e->getMessage();exit();}

如上例所示，一个POP3Processor对象被使用适当的输入参数实例化，并且建立了一个到指定POP3服务器的连接。然后，假定在连接处理过程中没有错误发生，那么接下来将检索电子邮件消息并将其显示于Web页面中，这是通过使用fetch()方法来实现的。在示例最后，通过调用相应的close()方法关闭连接。

keaide

好，现在我已向你展示了如何使用POP3Processor类从一个POP3服务器取回消息，但是这个类是如何与我前面创建的用户接口类进行交互的呢？为了展示AJAX应用程序是如何与POP 3处理类共同工作的，我将把所有的客户端代码放到一个pop_client.htm文件中，而把PHP类放到另一个文件pop_processor.php中，这样你就可以很方便地看清完整的POP3客户端是如何工作的。

六、组装POP3端—把客户端和服务器端层联合起来

如我在前面所提及，文件pop_client.htm构成基于web的POP3客户端，这个文件与PHP3Processor类进行交互，以便连接到POP3服务器并从中检索邮件消息列表。因这个文件代码较长，请参考所附源码文件（已加上详细中文注释）。

七、总结

现在，我们已经全部结束。在本系列文章中，我向你展示了AJAX技术的另一种应用—创建一个基于Web的POP3客户端应用程序，它能够实现从一个邮件服务器中检索电子邮件消息并将其显示于一个Web页面中。当然，此程序仅是开发更复杂的工程的开始；但是通过这个程序，你应该能够更为清晰地了解如何使用AJAX构建一个类似桌面应用程序的Web程序。