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

如今，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元素将用作可导航按钮（你已在前面的屏幕快照中看到过）的一个简单的包装器。