基於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郵件伺服器。