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

出处：51CTO.com 作者：朱先忠时间：2006-6-6 9:33:00

一、简介

如今，AJAX技术给客户端Web应用程序的开发带来巨大的影响。这种构建Web应用程序的新方法—在后台发送http请求而不需要页面重载—已经为当今电子邮件软件（它们原来被作为桌面应用程序设计和开发）的开发提供了若干种可能的实现方案。

你是否也想构建基于Web的在同一网页上运行所有功能的FTP客户端，聊天软件或全功能的电子邮件应用程序？首先，你要对AJAX技术有一个很好的了解，学习关于它的属性和方法，然后开发相应的后台和前端，最后非常希望你能够创建出一个至少能够体面地实现既定功能的可工作的HTTP程序。之后，你可以通过逐步地改进它以达到最终把这个程序变成一个强壮的可重用库。

在本文中，我将创建一个简单的基于Web的POP3客户端—它将使用XMLHttpRequest对象检索一个给定邮件服务器中的消息。这个应用程序将使用一个简单的前端来连接到邮件主机，显示消息并实现在消息间的来回导航。在服务器端，我将使用PHP来存取邮件服务器，推入（pushing）POP3命令并读取收件箱中的消息。

现在，我们开始构建这个客户端。

二、创建应用程序用户接口

第一步是构建基本的用户接口。如果仅考虑框架，这个接口的组成主要包括三个简单的DIV元素，它们将分别包含这个邮件客户端的相应区域。第一个DIV框将包含用于显示适当数据域的区域。这允许用户输入常规信息以连接到邮件服务器（通过指定其域名或IP地址，以及名字/口令组合）。下图1是这个客户端程序的用户接口部分构成框架的一个快照。

图1.Web POP3客户端程序用户接口快照

如上图所示，除了提供一些基本的在消息之间来回导航的控制外，这个基于Web的POP3客户端还显示连接到邮件服务器的典型数据域。另外，我又在这个程序中加入了一个“Clear”按钮—用于清除消息显示区域。

我的POP3客户端用户接口是易于使用的。当然，后面你将看到，客户端和服务器端应用程序层都会无缝地支持一个改进接口的开发和实现。然而，仅为演示目的，当前这个程序版本的功能还是比较简单的。

现在，你已经了解了这个程序界面的大致规划。下面，让我们接着讨论如何把上面的图像翻译成一些CSS声明和相应的结构化的(X)HTML标记。

三、构建程序式样—写CSS声明

其实，编写CSS声明来实现指定式样的此客户端程序是十分轻松的事情。因为，它的用户接口仅包括3个DIV元素，所以我有可能直接把大多数的CSS式样应用于其上。另外，我还将声明一些CSS类来改进控件按钮的外观。为此，控制我的基于Web POP3客户端程序外观的CSS规则如下：

body {

margin: 10px 0 0 0;

}

#serverinfo {

width: 700px;

height: 22px;

padding: 2px 5px 2px 5px;

border-top: 2px solid #000;

border-left: 2px solid #000;

border-right: 2px solid #000;

background: #9cf;

margin-left: auto;

margin-right: auto;

font: bold 11px Verdana， Arial， Helvetica， sans-

serif;

color: #000;

}

#mailcontainer {

width: 700px;

height: 520px;

padding: 2px 5px 2px 5px;

border: 2px solid #000;

background: #eee;

margin-left: auto;

margin-right: auto;

font: 12px normal Arial， Helvetica， sans-serif;

color: #000;

overflow: auto;

}

#navbar {

width: 700px;

height: 22px;

padding: 2px 5px 2px 5px;

border-left: 2px solid #000;

border-right: 2px solid #000;

border-bottom: 2px solid #000;

background: #9cf;

margin-left: auto;

margin-right: auto;

}

form {

display: inline;

}

.inputbox {

width: 150px;

border: 1px solid #000;

background: #eee;

}

.formbutton {

width: 70px;

height: 20px;

font: bold 11px Verdana， Arial， Helvetica， sans-

serif;

color: #000;

}

如上所示，我使用了3个不同的上下文选择器（分别是“#serverinfo”，“#mailcontainer”和“#navbar”选择器）来构建程序的每一处不同部分的式样。以一种类似方法，我把一些式样加到了用户输入域和控制按钮上以便进一步美化界面。当然，你可以通过编写自己的CSS规则来改变它们的外观。

然后，我们将编写(X)HTML标记，它对应实际的构建块以创建这个POP3客户程序的前端。

好，既然上面列出的CSS代码并不复杂，那么我们不再详及这些细节而继续往下讨论。下面我们将编写(X)HTML标记。

四、定义POP3客户端架构之编码(X)HTML标记

现在，你可能想进一步了解如何定义这个应用程序的(X)HTML标记。显然，顶部的DIV容器将包含所有相应的用于输入邮件服务器连接数据的表单域，还有激活到Web服务器的http请求的按钮。这部分内容比较简单，所以在此不再讨论。

同样，第二个DIV容器将负责显示来自服务器的消息列表，以及所有可能的最终由主机可能会发送回客户端的响应消息。这个元素中值得注意的唯一一点是，绑定到它的CSS选择器包含了“overflow:auto;”声明。这意味着，在将被显示的消息的长度大于这个DIV高度时，其上将自动添加一个滚动条。

最后，第3个DIV元素将用作可导航按钮（你已在前面的屏幕快照中看到过）的一个简单的包装器。

在规划完这个客户端的可视化结构以后，让我们开始具体的编码工作。下面是相应的(X)HTML标记，它能够实现客户端程序的前端的一致性：

<div id="serverinfo">

<form>

HOST <input name="host" type="text" class="inputbox" title="Enter

mail hostname/IP address" />

USER <input name="user" type="text" class="inputbox" title="Enter

username" />

PASSWORD <input name="pass" type="password" class="inputbox"

title="Enter password" />

<input name="connect" type="button" value="Connect"

class="formbutton" />

</form>

</div>

<div id="mailcontainer">

</div>

<div id="navbar">

<form>

<input name="prev" type="button" value="&lt;&lt Prev" class="formbutton" title="Previous message" />

<input name="next" type="button" value="Next &gt;&gt;" class="formbutton" title="Next message" />

<input name="clear" type="button" value="Clear" class="formbutton" title="Clear all messages" />

</form>

</div>

在这段代码中，我定义了以前提及的DIV块用以构建用户接口框架。如上所述，最上面的DIV包含允许用户输入邮件服务器连接值的表单域，而底部的DIV包含了用于在电子邮件消息间前后导航的按钮。结构化的标记的最后一部分相应于“mailcontainer”DIV元素，它负责显示检索自指定服务器的每一条消息，并且顺便显示其各自的响应—无论消息连接或检索过程是否成功。

假定现在我已经定义好了生成邮件客户端用户接口的CSS声明和(X)HTML标记，那么接下来你会问：“下一步该干什么？”好，在下面的几行代码中，我将定义构成整个基于Web的邮件应用程序的每一个JavaScript函数的通用代码，以便你能更为清晰地理解其编程逻辑。

五、创建客户端应用程序架构之定义通用JavaScript函数

现在，既然你已经有了生成应用程序用户界面的CSS代码和(X)HTML标记，那么剩下的就是，定义将集成整个POP3端程序的JavaScript函数的结构。为此，下面是相关函数的列表：

//请求PHP文件—它负责从邮件服务器中提取消息

function sendHttpRequest(){

//这里是提取PHP文件的代码

}

//在网页上显示电子邮件消息

function fetchMessages(){

//这里是显示电子邮件消息的代码

}

//获取表单数据

'variable1=value1&variable2=value2&....variableN=valueN;

function getFormValues(){

//这里是获取表单数据的代码

}

//执行初始化任务，赋值事件处理器并且清除页面目录

function initializeUserPanel(){

//这里是建立用户面板的代码

}

仅使用了4个JavaScript函数，这个小小的POP客户端就能够实现直接从邮件服务器取回消息并且在刚才创建的基于Web的用户接口上显示它们。现在，让我们快速浏览一下各个函数的任务以便于你理解其各自的功能。

第一个函数“sendHttpRequest()”，负责存取POP3文件—它实现把原始的POP3命令推入到邮件服务器中。显然，一旦用户输入服务器名（或它的IP地址）和他的用户名和／或口令信息，这个过程就会被调用。

显然，“fetchMessages()”函数负责在网页上显示电子邮件消息（其实包括服务器上生成的所有响应）。“getFormValues()”函数负责取得在建立到邮件服务器的连接前由用户输入的所有的表单数据。

最后，在每次新建一个到邮件服务器的连接时，“initializeUserPanel()”函数负责执行一些有用的初始化任务，例如把“onclick”事件处理器分配到控制按钮和重置包含DIV的消息的内容等。在简短地描述了集成POP客户端的每个JavaScript函数的任务后，你可能同意我的看法—应用程序的逻辑很容易理解。因此，在编码完整的客户端应用程序层时，你在理解程序的核心功能方面不应该有任何问题。

注如果你等不及在下一篇文章中讨论该POP3客户端的工作方式，你可以先下载分析本文相随的源码文件。

六、小结

至此，我已完成这个简单的基于Web的POP3客户端程序的通用结构的定义。我非常希望，这个首篇能够为你提供足够的启发性—创建该程序的外观感觉以及定义每一个客户端函数的框架。

在下一篇文章中，我们将分析包含应用程序层的JavaScript函数的完整代码。