基於AJAX技術開發Web電子郵件用戶端之 UI篇

導讀】在本系列（共三篇）文章中，你將學習如何利用AJAX技術建立一個簡單的基於Web的POP3用戶端。具體地說，我們將全面討論如何用AJAX技術構建用戶端UI及其全面的JavaScript編程，最後通過一個PHP類檢索郵件伺服器中的電子郵件訊息並將其顯示於Web頁面中。

一、簡介

如今，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函數的完整代碼。