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

【导读】在本篇中，我们将全面分析构成本系列中的基于Web的POP3客户程序的应用程序层JavaScipt编码。

一、简介

在第一篇中，我们构建了本系列文章总目标—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()，它负责显示检索自邮件服务器的消息。

下面，让我们分析这个函数的工作原理。
四、显示电子邮件消息—定义fetchMessages()函数

首先，为便于理解函数代码，我先作一下声明。注意，我前面所建立的函数sendHttpRequest()能够在HTTP请求结束之后调用一个回调函数以处理来自于服务器的响应。在这种情况中，我将使用fetchMessages()作为当电子邮件消息从邮件服务器取回之后将被调用的回调函数，以便把这些消息正确显示到网页上。

现在，你已经了解此函数的目的以及它是如何使用于应用程序中的。下面，我们看一下它的具体定义：

function fetchMessages(messages){ //构建消息数组 var messages=messages.split('||||'); var mdiv=document.getElementById('mailcontainer'); if(!mdiv){return}; //显示邮件服务器反应 mdiv.innerHTML=messages[0]; //得到'previous'钮扣 var prev=document.getElementsByTagName('form')[1].elements ['prev']; if(!prev){return}; //得到'next'钮扣 var next=document.getElementsByTagName('form')[1].elements ['next']; if(!next){return}; //得到'clear'钮扣 var clear=document.getElementsByTagName('form')[1].elements ['clear']; if(!clear){return}; //向后移动消息指针 prev.onclick=function(){ index--; if(index<0){index=0}; mdiv.innerHTML=messages[index]; } //向前移动消息指针 next.onclick=function(){ index++; if(index==messages.length){index=messages.length-1}; mdiv.innerHTML=messages[index]; } //清除邮件容器 clear.onclick=function(){mdiv.innerHTML=''}; }

上面这个函数中有几点值得注意。第一点是，它把电子邮件消息作为唯一的输入参数（messages），用于在后面的处理。也许处理电子邮件消息是一件很恼人的事情，因为到目前为止运行于服务器端的PHP代码还没有创建。然而，你不必担心这一点，因为我将在最后一篇中解释这部分PHP代码。

至此，我们已经十分清楚，所有的电子邮件消息将被通过相应的请求对象的responseText属性以字符串形式取回，然后作为一个数组结构存储起来—在此每一条消息对应一个数组元素。这项任务是容易实现的，可以通过使用“||||”（四个管道符号）分隔符分解消息来实现,这样可以使得消息被进行单独处理。

这个过程是由下面一行来实现的：

var messages=messages.split('||||');

在此，我们必须十分小心，因为由不同的POP3邮件服务器所调度的消息格式可能存在微妙的区别。为了确保消息检索能够工作于大多数的POP3邮件服务器上，我使用了四个管道分隔符，但是你可以使用另外其它符号，这要根据每一种服务器的特定需求而定。

此函数代码的结果很容易理解。既然所有的消息将被显示于“mailcontainer”DIV部分（我们在上一篇中已经定义），那么这个函数将显示初始的服务器响应（作为messages数组的第一个元素存储（messages[0]））,然后把各种行为分配到每一个导航按钮。

为了在消息之间来回切换，“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邮件服务器。