一、簡(jiǎn)介
如今，AJAX技術(shù)給客戶端Web應(yīng)用程序的開(kāi)發(fā)帶來(lái)巨大的影響。這種構(gòu)建Web應(yīng)用程序的新方法—在后臺(tái)發(fā)送http請(qǐng)求而不需要頁(yè)面重載—已經(jīng)為當(dāng)今電子郵件軟件（它們?cè)瓉?lái)被作為桌面應(yīng)用程序設(shè)計(jì)和開(kāi)發(fā)）的開(kāi)發(fā)提供了若干種可能的實(shí)現(xiàn)方案。

你是否也想構(gòu)建基于Web的在同一網(wǎng)頁(yè)上運(yùn)行所有功能的FTP客戶端，聊天軟件或全功能的電子郵件應(yīng)用程序？首先，你要對(duì)AJAX技術(shù)有一個(gè)很好的了解，學(xué)習(xí)關(guān)于它的屬性和方法，然后開(kāi)發(fā)相應(yīng)的后臺(tái)和前端，最后非常希望你能夠創(chuàng)建出一個(gè)至少能夠體面地實(shí)現(xiàn)既定功能的可工作的HTTP程序。之后，你可以通過(guò)逐步地改進(jìn)它以達(dá)到最終把這個(gè)程序變成一個(gè)強(qiáng)壯的可重用庫(kù)。

在本文中，我將創(chuàng)建一個(gè)簡(jiǎn)單的基于Web的POP3客戶端—它將使用XMLHttpRequest對(duì)象檢索一個(gè)給定郵件服務(wù)器中的消息。這個(gè)應(yīng)用程序?qū)⑹褂靡粋€(gè)簡(jiǎn)單的前端來(lái)連接到郵件主機(jī)，顯示消息并實(shí)現(xiàn)在消息間的來(lái)回導(dǎo)航。在服務(wù)器端，我將使用PHP來(lái)存取郵件服務(wù)器，推入（pushing）POP3命令并讀取收件箱中的消息。

現(xiàn)在，我們開(kāi)始構(gòu)建這個(gè)客戶端。

二、創(chuàng)建應(yīng)用程序用戶接口

第一步是構(gòu)建基本的用戶接口。如果僅考慮框架，這個(gè)接口的組成主要包括三個(gè)簡(jiǎn)單的DIV元素，它們將分別包含這個(gè)郵件客戶端的相應(yīng)區(qū)域。第一個(gè)DIV框?qū)糜陲@示適當(dāng)數(shù)據(jù)域的區(qū)域。這允許用戶輸入常規(guī)信息以連接到郵件服務(wù)器（通過(guò)指定其域名或IP地址，以及名字/口令組合）。下圖1是這個(gè)客戶端程序的用戶接口部分構(gòu)成框架的一個(gè)快照

如上圖所示，除了提供一些基本的在消息之間來(lái)回導(dǎo)航的控制外，這個(gè)基于Web的POP3客戶端還顯示連接到郵件服務(wù)器的典型數(shù)據(jù)域。另外，我又在這個(gè)程序中加入了一個(gè)“Clear”按鈕—用于清除消息顯示區(qū)域。

我的POP3客戶端用戶接口是易于使用的。當(dāng)然，后面你將看到，客戶端和服務(wù)器端應(yīng)用程序?qū)佣紩?huì)無(wú)縫地支持一個(gè)改進(jìn)接口的開(kāi)發(fā)和實(shí)現(xiàn)。然而，僅為演示目的，當(dāng)前這個(gè)程序版本的功能還是比較簡(jiǎn)單的。

現(xiàn)在，你已經(jīng)了解了這個(gè)程序界面的大致規(guī)劃。下面，讓我們接著討論如何把上面的圖像翻譯成一些CSS聲明和相應(yīng)的結(jié)構(gòu)化的(X)HTML標(biāo)記。

三、構(gòu)建程序式樣—寫(xiě)CSS聲明

其實(shí)，編寫(xiě)CSS聲明來(lái)實(shí)現(xiàn)指定式樣的此客戶端程序是十分輕松的事情。因?yàn)?，它的用戶接口僅包括3個(gè)DIV元素，所以我有可能直接把大多數(shù)的CSS式樣應(yīng)用于其上。另外，我還將聲明一些CSS類(lèi)來(lái)改進(jìn)控件按鈕的外觀。為此，控制我的基于Web POP3客戶端程序外觀的CSS規(guī)則如下：

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個(gè)不同的上下文選擇器（分別是“#serverinfo”，“#mailcontainer”和“#navbar”選擇器）來(lái)構(gòu)建程序的每一處不同部分的式樣。以一種類(lèi)似方法，我把一些式樣加到了用戶輸入域和控制按鈕上以便進(jìn)一步美化界面。當(dāng)然，你可以通過(guò)編寫(xiě)自己的CSS規(guī)則來(lái)改變它們的外觀。

然后，我們將編寫(xiě)(X)HTML標(biāo)記，它對(duì)應(yīng)實(shí)際的構(gòu)建塊以創(chuàng)建這個(gè)POP3客戶程序的前端。

好，既然上面列出的CSS代碼并不復(fù)雜，那么我們不再詳及這些細(xì)節(jié)而繼續(xù)往下討論。下面我們將編寫(xiě)(X)HTML標(biāo)記。

四、定義POP3客戶端架構(gòu)之編碼(X)HTML標(biāo)記

現(xiàn)在，你可能想進(jìn)一步了解如何定義這個(gè)應(yīng)用程序的(X)HTML標(biāo)記。顯然，頂部的DIV容器將包含所有相應(yīng)的用于輸入郵件服務(wù)器連接數(shù)據(jù)的表單域，還有激活到Web服務(wù)器的http請(qǐng)求的按鈕。這部分內(nèi)容比較簡(jiǎn)單，所以在此不再討論。

同樣，第二個(gè)DIV容器將負(fù)責(zé)顯示來(lái)自服務(wù)器的消息列表，以及所有可能的最終由主機(jī)可能會(huì)發(fā)送回客戶端的響應(yīng)消息。這個(gè)元素中值得注意的唯一一點(diǎn)是，綁定到它的CSS選擇器包含了“overflow:auto;”聲明。這意味著，在將被顯示的消息的長(zhǎng)度大于這個(gè)DIV高度時(shí)，其上將自動(dòng)添加一個(gè)滾動(dòng)條。

最后，第3個(gè)DIV元素將用作可導(dǎo)航按鈕（你已在前面的屏幕快照中看到過(guò)）的一個(gè)簡(jiǎn)單的包裝器。

在規(guī)劃完這個(gè)客戶端的可視化結(jié)構(gòu)以后，讓我們開(kāi)始具體的編碼工作。下面是相應(yīng)的(X)HTML標(biāo)記，它能夠?qū)崿F(xiàn)客戶端程序的前端的一致性：

HOST USER PASSWORD title="Enter password" />class="formbutton" />

在這段代碼中，我定義了以前提及的DIV塊用以構(gòu)建用戶接口框架。如上所述，最上面的DIV包含允許用戶輸入郵件服務(wù)器連接值的表單域，而底部的DIV包含了用于在電子郵件消息間前后導(dǎo)航的按鈕。結(jié)構(gòu)化的標(biāo)記的最后一部分相應(yīng)于“mailcontainer”DIV元素，它負(fù)責(zé)顯示檢索自指定服務(wù)器的每一條消息，并且順便顯示其各自的響應(yīng)—無(wú)論消息連接或檢索過(guò)程是否成功。

假定現(xiàn)在我已經(jīng)定義好了生成郵件客戶端用戶接口的CSS聲明和(X)HTML標(biāo)記，那么接下來(lái)你會(huì)問(wèn)：“下一步該干什么？”好，在下面的幾行代碼中，我將定義構(gòu)成整個(gè)基于Web的郵件應(yīng)用程序的每一個(gè)JavaScript函數(shù)的通用代碼，以便你能更為清晰地理解其編程邏輯。

五、創(chuàng)建客戶端應(yīng)用程序架構(gòu)之定義通用JavaScript函數(shù)

現(xiàn)在，既然你已經(jīng)有了生成應(yīng)用程序用戶界面的CSS代碼和(X)HTML標(biāo)記，那么剩下的就是，定義將集成整個(gè)POP3端程序的JavaScript函數(shù)的結(jié)構(gòu)。為此，下面是相關(guān)函數(shù)的列表：

//請(qǐng)求PHP文件—它負(fù)責(zé)從郵件服務(wù)器中提取消息

function sendHttpRequest(){

//這里是提取PHP文件的代碼

}

//在網(wǎng)頁(yè)上顯示電子郵件消息

function fetchMessages(){

//這里是顯示電子郵件消息的代碼

}

//獲取表單數(shù)據(jù)

'variable1=value1%26amp;variable2=value2%26amp;....variableN=valueN;

function getFormValues(){

//這里是獲取表單數(shù)據(jù)的代碼

}

//執(zhí)行初始化任務(wù)，賦值事件處理器并且清除頁(yè)面目錄

function initializeUserPanel(){

//這里是建立用戶面板的代碼

}

僅使用了4個(gè)JavaScript函數(shù)，這個(gè)小小的POP客戶端就能夠?qū)崿F(xiàn)直接從郵件服務(wù)器取回消息并且在剛才創(chuàng)建的基于Web的用戶接口上顯示它們。現(xiàn)在，讓我們快速瀏覽一下各個(gè)函數(shù)的任務(wù)以便于你理解其各自的功能。

第一個(gè)函數(shù)“sendHttpRequest()”，負(fù)責(zé)存取POP3文件—它實(shí)現(xiàn)把原始的POP3命令推入到郵件服務(wù)器中。顯然，一旦用戶輸入服務(wù)器名（或它的IP地址）和他的用戶名和／或口令信息，這個(gè)過(guò)程就會(huì)被調(diào)用。

顯然，“fetchMessages()”函數(shù)負(fù)責(zé)在網(wǎng)頁(yè)上顯示電子郵件消息（其實(shí)包括服務(wù)器上生成的所有響應(yīng)）?！癵etFormValues()”函數(shù)負(fù)責(zé)取得在建立到郵件服務(wù)器的連接前由用戶輸入的所有的表單數(shù)據(jù)。

最后，在每次新建一個(gè)到郵件服務(wù)器的連接時(shí)，“initializeUserPanel()”函數(shù)負(fù)責(zé)執(zhí)行一些有用的初始化任務(wù)，例如把“onclick”事件處理器分配到控制按鈕和重置包含DIV的消息的內(nèi)容等。在簡(jiǎn)短地描述了集成POP客戶端的每個(gè)JavaScript函數(shù)的任務(wù)后，你可能同意我的看法—應(yīng)用程序的邏輯很容易理解。因此，在編碼完整的客戶端應(yīng)用程序?qū)訒r(shí)，你在理解程序的核心功能方面不應(yīng)該有任何問(wèn)題。

注 如果你等不及在下一篇文章中討論該P(yáng)OP3客戶端的工作方式，你可以先下載分析本文相隨的源碼文件。

六、小結(jié)

至此，我已完成這個(gè)簡(jiǎn)單的基于Web的POP3客戶端程序的通用結(jié)構(gòu)的定義。我非常希望，這個(gè)首篇能夠?yàn)槟闾峁┳銐虻膯l(fā)性—?jiǎng)?chuàng)建該程序的外觀感覺(jué)以及定義每一個(gè)客戶端函數(shù)的框架。

在下一篇文章中，我們將分析包含應(yīng)用程序?qū)拥腏avaScript函數(shù)的完整代碼

• ajax