隔離應(yīng)用程序?qū)觼?lái)產(chǎn)生干凈優(yōu)雅的 Web 應(yīng)用程序

級(jí)別： 中級(jí)

Senthil Nathan (sen@us.ibm.com), 高級(jí)軟件工程師, IBM

2007 年 6 月 20 日

Ajax（Asynchronous JavaScript + XML）正在迅速地成為時(shí)髦的技術(shù)，它可以為在瀏覽器中運(yùn)行的 Web 應(yīng)用程序提供具有桌面質(zhì)量的軟件特性。開(kāi)放源碼軟件（比如 Linux-Apache-MySQL-PHP，即 LAMP）和基于開(kāi)放標(biāo)準(zhǔn)的 Java™ 2 Platform, Enterprise Edition 中間件（比如 IBM® WebSphere® Application Server Community Edition）為開(kāi)發(fā)和部署 Ajax Web 應(yīng)用程序提供了出色的支持。這個(gè)分三部分的系列討論如何使用開(kāi)放源碼中間件開(kāi)發(fā)端到端 Ajax 應(yīng)用程序，本文是這個(gè)系列的第一篇文章。如果您是 Web 開(kāi)發(fā)的新手，但是可以閱讀和理解用 XHTML、CSS、JavaScript、PHP 和 SQL 編寫的代碼，那么本文正適合您。讀完本文之后，您會(huì)很好地理解 Ajax 的基本概念以及 Ajax 在三層 Web 應(yīng)用程序場(chǎng)景中可能產(chǎn)生的作用。

Ajax 是 Web 2.0 技術(shù)的一部分，近來(lái)得到了架構(gòu)師、開(kāi)發(fā)人員、產(chǎn)品經(jīng)理和 Web 應(yīng)用程序用戶的極大關(guān)注。Ajax 編程技術(shù)由一些已經(jīng)證明有效的技術(shù)組成，比如 XHTML、JavaScript、CSS 和 XML Http Request（XHR）。流行的服務(wù)訪問(wèn)和數(shù)據(jù)交換技術(shù)，比如 Representational State Transfer（REST）和 JavaScript Object Notation（JSON），也非常適合 Ajax 技術(shù)。客戶端上已經(jīng)證明有效的這些技術(shù)可以與 PHP、Python 和 Ruby 等開(kāi)放源碼技術(shù)相結(jié)合，將 Ajax 擴(kuò)展到中間層應(yīng)用程序開(kāi)發(fā)領(lǐng)域。在這個(gè)組合之上，還可以用開(kāi)放源碼數(shù)據(jù)庫(kù) MySQL 建立數(shù)據(jù)層。

請(qǐng)?jiān)L問(wèn) Ajax 技術(shù)資源中心，這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何關(guān)于 Ajax 的新信息都能在這里找到。

與 Ajax 編程技術(shù)相匹配的其他技術(shù)包括同樣令人印象深刻的基于 Eclipse 的開(kāi)發(fā)工具，這些工具是開(kāi)放源碼的，可以免費(fèi)下載和使用。前面提到的所有客戶端、中間層和數(shù)據(jù)層技術(shù)組合在一起，就形成了一個(gè)強(qiáng)大的 Web 應(yīng)用程序開(kāi)發(fā)技術(shù)組合。但是，究竟如何開(kāi)發(fā)和部署端到端 Ajax 應(yīng)用程序呢？這個(gè)分三部分的文章系列將帶領(lǐng)您研究一個(gè)端到端開(kāi)發(fā)場(chǎng)景，以此回答這個(gè)問(wèn)題。

典型的企業(yè)級(jí) Web 應(yīng)用程序要處理許多因素，從而保證高度健壯。為了學(xué)習(xí)所選的開(kāi)放源碼軟件的核心功能，我們的場(chǎng)景不考慮安全性、可伸縮性和可用性等關(guān)鍵的企業(yè)級(jí)特性，您應(yīng)該通過(guò)其他資料學(xué)習(xí)這些特性。本文中的所有討論只適用于我們場(chǎng)景中描述的一類 Ajax 應(yīng)用程序。具體地說(shuō)，這個(gè)系列詳細(xì)討論如何創(chuàng)建 MySQL 數(shù)據(jù)庫(kù)，在 PHP 運(yùn)行時(shí)環(huán)境中設(shè)計(jì)和開(kāi)發(fā)中間層/數(shù)據(jù)庫(kù)邏輯，然后使用 JavaScript 創(chuàng)建一個(gè)真正的單頁(yè)面 Ajax 客戶機(jī)界面。這個(gè)系列包含代碼示例，介紹在 Eclipse 中開(kāi)發(fā)和測(cè)試 Ajax 應(yīng)用程序所需的步驟，解釋如何在 Firefox（客戶端）、Zend PHP（中間層）和 MySQL（數(shù)據(jù)層）中部署 Ajax 應(yīng)用程序。這個(gè)端到端應(yīng)用程序涉及 XHTML、CSS、JavaScript、XHR、DOM、REST、SOAP、JSON、XML、PHP、MySQL 和 Eclipse 的綜合運(yùn)用，涉及前面提到的開(kāi)放源碼平臺(tái)的許多內(nèi)置特性。簡(jiǎn)言之，這個(gè)系列是介紹如何在應(yīng)用程序?qū)又g進(jìn)行適當(dāng)?shù)母綦x，從而形成干凈優(yōu)雅的 Web 應(yīng)用程序。

簡(jiǎn)介

正如標(biāo)題所指出的，這個(gè)分三部分的系列將詳細(xì)介紹開(kāi)發(fā)端到端 Ajax 應(yīng)用程序的一些核心功能。這些功能包括以下三個(gè)應(yīng)用程序?qū)又械奶囟夹g(shù)：

• 客戶端
• 中間層
• 數(shù)據(jù)層

在客戶端中，包含 XHTML、CSS、JavaScript 和 XML Http Request（XHR）等技術(shù)。除了前面已經(jīng)提到的幾種中間層開(kāi)放源碼技術(shù)之外，這個(gè)系列還使用 PHP，這是因?yàn)?PHP 非常簡(jiǎn)單而且當(dāng)前得到了廣泛應(yīng)用。在數(shù)據(jù)層中使用 MySQL 數(shù)據(jù)庫(kù)。另外，這個(gè)系列使用流行的 Web 服務(wù)技術(shù)，比如 REST、SOAP、JSON 和 XML。我們將在一個(gè)場(chǎng)景中綜合使用所有這些技術(shù)。

為了進(jìn)行端到端 Ajax 應(yīng)用程序開(kāi)發(fā)，需要按照下面幾節(jié)中的步驟安裝和配置運(yùn)行時(shí)環(huán)境和開(kāi)發(fā)環(huán)境。然后，我們并不按慣例提供 Hello World 應(yīng)用程序，而是分析一個(gè)比較復(fù)雜的銀行場(chǎng)景。這個(gè)場(chǎng)景在一個(gè)虛構(gòu)的銀行環(huán)境中解釋前面提到的所有技術(shù)的使用方法，其中涉及銀行的后端數(shù)據(jù)庫(kù)、基于瀏覽器的銀行客戶門戶以及一個(gè)真實(shí)的第三方金融 Web 服務(wù)。

所需的軟件包

為了開(kāi)發(fā)和部署跨越所有三個(gè)應(yīng)用程序?qū)拥你y行場(chǎng)景，需要為這些層中的以下組件選擇軟件：

• Web 瀏覽器
• 數(shù)據(jù)庫(kù)服務(wù)器
• Web 服務(wù)器
• 中間層服務(wù)器
• 用于中間層代碼開(kāi)發(fā)的 IDE
• 用于客戶端代碼開(kāi)發(fā)的 IDE

有許多開(kāi)放源碼軟件可以滿足各個(gè)層的需要，本系列中的場(chǎng)景選用以下軟件：

Web 瀏覽器：Mozilla Firefox 2.0.0.4 或更高版本。Firefox 具有許多優(yōu)點(diǎn)，包括可用性、在線安全性以及能夠通過(guò)眾多的擴(kuò)展應(yīng)用程序進(jìn)行定制。還要使用 Firebug，這是 Firefox 的一個(gè)瀏覽器應(yīng)用程序調(diào)試器擴(kuò)展。

數(shù)據(jù)庫(kù)服務(wù)器：MySQL 5.0.41 或更高版本。MySQL 采用客戶機(jī)/服務(wù)器模式和嵌入模式。它完全是用 C 和 C++ 編寫的。它有兩種版本：Enterprise 服務(wù)器和 Community 服務(wù)器。Community 服務(wù)器是免費(fèi)的，而且足以滿足本文中的銀行場(chǎng)景的需要。

Web 服務(wù)器：Apache Web server 2.2.2。Apache 允許進(jìn)行靈活的配置，并可以用第三方模塊進(jìn)行擴(kuò)展。

中間層服務(wù)器：Zend Core 2.0.1 或更高版本。這種免費(fèi)的開(kāi)放源碼服務(wù)器支持 PHP 5。它得到強(qiáng)有力的社區(qū)支持。它包含 Apache Web 服務(wù)器，并支持 MySQL、IBM DB2® 和 Oracle 等數(shù)據(jù)庫(kù)。Zend Core for IBM 專門針對(duì) IBM DB2 進(jìn)行過(guò)調(diào)優(yōu)。圖 1 給出 Zend Core 的概況。

中間層 IDE（Integrated Development Environment）：Eclipse PDT 0.7 RC3 或更高版本。PDT 是針對(duì) Eclipse 平臺(tái)的 PHP Development Tools 框架，其中包含開(kāi)發(fā) PHP 應(yīng)用程序所需的所有開(kāi)發(fā)組件。在這個(gè) IDE 中還支持 PHP 調(diào)試。Zend、IBM 和其他公司將它捐獻(xiàn)給開(kāi)放源碼運(yùn)動(dòng)。在編寫本文時(shí)，它剛剛出現(xiàn)，而且正好適合開(kāi)發(fā)我們銀行場(chǎng)景的中間層邏輯。

客戶端 IDE：Aptana Web IDE 0.2.8.14433 或更高版本。這是一個(gè)免費(fèi)的開(kāi)放源碼的跨平臺(tái)的以 JavaScript 為中心的開(kāi)發(fā)環(huán)境，可以用來(lái)開(kāi)發(fā) Ajax 瀏覽器應(yīng)用程序。它為 JavaScript、HTML 和 CSS 提供編碼支持。它支持 JavaScript 調(diào)試，并內(nèi)置了對(duì)幾種 Ajax 框架的支持。除此之外，它還是基于 Eclipse 的。

按照下面幾節(jié)中的步驟安裝和設(shè)置這些開(kāi)放源碼軟件包，從而建立開(kāi)發(fā)和部署端到端 Ajax 應(yīng)用程序的環(huán)境。（注意：本文中的所有安裝和開(kāi)發(fā)說(shuō)明都針對(duì) Microsoft® Windows® 操作系統(tǒng)。）

安裝 Mozilla Firefox

按照以下步驟安裝 Mozilla Firefox：

1. 創(chuàng)建一個(gè)稱為 c:\temp\dw-ajax 的臨時(shí)目錄，可以在這里存儲(chǔ)不同軟件包的所有安裝文件。
2. 通過(guò) 參考資料 一節(jié)中的 Mozilla URL 下載 Mozilla Firefox 2.0.0.4 或更高版本，并將它保存到 c:\temp\dw-ajax 中。
3. 通過(guò)運(yùn)行第 2 步中下載的文件，安裝 Mozilla Firefox 2.0.0.4：
   1. 在 Mozilla 安裝向?qū)е校瑔螕?Next。
   2. 接受許可協(xié)議并單擊 Next。
   3. 選擇 Custom 并單擊 Next。
   4. 確保選擇 DOM Inspector 和 Quality Feedback Agent 選項(xiàng)，并單擊 Next。
   5. 接受默認(rèn)的安裝文件夾并單擊 Next。
   6. 確保不選擇前兩個(gè)選項(xiàng)（On my Desktop 和 In my Start Menu Programs Folder）。
   7. 完成安裝之后，確保選擇 Launch Mozilla Firefox now 選項(xiàng)。
   8. 單擊 Finish。
   9. 如果詢問(wèn)是否讓 Mozilla Firefox 成為默認(rèn)瀏覽器，那么選擇 Yes。
   10. 啟動(dòng) Firefox 瀏覽器并訪問(wèn) 參考資料 一節(jié)中的 Mozilla Firefox URL。
   11. 單擊頁(yè)面頂部的 Add-ons。
   12. 在 Firefox Web 站點(diǎn)的搜索欄中，輸入 Firebug 并單擊 Search。
   13. 在搜索結(jié)果中，單擊 Firebug。
   14. 單擊 Install now；在出現(xiàn)的彈出對(duì)話框中，單擊 Install now。
   15. 單擊 Restart Firefox。
   16. 在 Firefox 中，單擊 Tools->Firebug->Open Firebug。
   17. 如果在瀏覽器窗口的底部看到 Firebug 被禁用的消息，那么單擊 Enable Firebug。
   18. 關(guān)閉 Firefox 瀏覽器。

安裝 MySQL

執(zhí)行以下步驟來(lái)安裝 MySQL 數(shù)據(jù)庫(kù)服務(wù)器：

1. 訪問(wèn) 參考資料 一節(jié)中的 MySQL URL。
2. 單擊 MySQL Community Server。（這時(shí)一般會(huì)直接轉(zhuǎn)到當(dāng)前推薦的 GA 版本。）
3. 下載 5.0.41 或更高版本的 Windows (x86) Zip/Setup.EXE 并將它存儲(chǔ)在 c:\temp\dw-ajax 目錄中。（這個(gè) .zip 文件只包含一個(gè)文件，這是 MySQL 的可執(zhí)行安裝文件。）
4. 從 .zip 文件中提取出 MySQL 的可執(zhí)行安裝文件并將它存儲(chǔ)在 c:\temp\dw-ajax 目錄中。
5. 運(yùn)行第 4 步中提取出的可執(zhí)行文件（Setup.exe）：
   1. 單擊 Next。
   2. 選擇安裝類型為 Complete 并單擊 Next。
   3. 單擊 Install。
   4. 選擇 Skip Sign-Up 并單擊 Next。
   5. 確保選擇 Configure the MySQL Server now 并單擊 Finish。這時(shí)會(huì)啟動(dòng) MySQL Server Instance Configuration Wizard。
   6. 單擊 Next。
   7. 選擇 Detailed Configuration 并單擊 Next。
   8. 選擇 Developer Machine 并單擊 Next。
   9. 選擇 Select Multifunctional Database 并單擊 Next。
   10. 對(duì)于 InnoDB Tablespace Settings，接受默認(rèn)選項(xiàng)并單擊 Next。
   11. 選擇 Decision Support (DSS)/OLAP 并單擊 Next。
   12. 確保選擇 Enable TCP/IP Networking 和 Enable Strict Mode 選項(xiàng)并單擊 Next。
   13. 選擇 Standard Character Set 并單擊 Next。
   14. 確保選擇 Install As Windows Service 和 Include Bin Directory in Windows PATH 選項(xiàng)并單擊 Next。
   15. 輸入新的根密碼 webtech 并單擊 Next。
   16. 單擊 Execute。
   17. 單擊 Finish。

安裝 Apache Web 服務(wù)器和 Zend Core PHP 服務(wù)器

Zend Technologies Ltd. 免費(fèi)提供 Zend Core。它包含 Apache Web 服務(wù)器。執(zhí)行以下步驟來(lái)安裝 Apache Web 服務(wù)器和 Zend Core PHP 服務(wù)器。

為了免費(fèi)下載 Zend Core，必須在 Zend Web 站點(diǎn)上注冊(cè)。如果還沒(méi)有注冊(cè)，那么訪問(wèn) 參考資料 中的 Zend Core URL 并注冊(cè)。

1. 在 Zend Web 站點(diǎn)上注冊(cè)之后，訪問(wèn) 參考資料 中的 Zend Core URL 并登錄進(jìn)下載區(qū)域。
2. 選擇 Agree to EULA 復(fù)選框并單擊 Submit。
3. 在 Zend Core Generic 部分中，下載 Zend Core Windows x86（Version v2.0.1 或更高版本）并將這個(gè) .zip 文件保存在 c:\temp\dw-ajax 目錄中。（這個(gè) .zip 文件只包含一個(gè)文件，這是 Zend Core 的可執(zhí)行安裝文件。）
4. 從 .zip 文件中提取出 Zend Core 的可執(zhí)行安裝文件并將它存儲(chǔ)在 c:\temp\dw-ajax 目錄中。
5. 運(yùn)行 ZendCore-v2.0.1-Windows-x86.exe 或更高版本：
   1. 單擊 Next。
   2. 接受許可協(xié)議并單擊 Next。
   3. 選擇安裝類型為 Complete 并單擊 Next。
   4. 選擇 Skip Sign-Up 并單擊 Next。
   5. 接受默認(rèn)的目標(biāo)位置并單擊 Next。
   6. 選擇 Install bundled Apache 2.2.2 并單擊 Next。
   7. 接受默認(rèn)端口號(hào) 80 并單擊 Next。
   8. 接受默認(rèn)的擴(kuò)展關(guān)聯(lián)并單擊 Next。
   9. 輸入管理控制臺(tái)密碼 webtech 并單擊 Next。
   10. 確保將 Zend Network Registration 設(shè)置為 No 并單擊 Next。
   11. 單擊 Install 開(kāi)始安裝，并等待 Zend Core 完成安裝。在復(fù)制 Zend Core 文件之后，安裝程序會(huì)安裝 Microsoft Visual C++ 的可重新發(fā)布版本。在此之后，Zend Core 安裝程序結(jié)束運(yùn)行，并顯示一個(gè)包含 Zend Core Administration URL 的消息對(duì)話框。
   12. 單擊 OK 關(guān)閉這個(gè)消息對(duì)話框。
   13. 單擊 Finish 關(guān)閉安裝完成對(duì)話框。
   14. 進(jìn)入計(jì)算機(jī)上的 c:\Program Files\Zend\Apache2\bin 目錄并雙擊 ApacheMonitor 程序。這時(shí) Apache Monitor 會(huì)作為面板圖標(biāo)出現(xiàn)在任務(wù)欄上。可以使用這個(gè)面板圖標(biāo)啟動(dòng)和停止 Apache 和 Zend 服務(wù)器。
6. 配置 Zend Core：
   1. 在 Windows Start 菜單上，選擇 Programs->Zend Core->Zend Core Administration Console。
   2. 輸入密碼 webtech。
   3. 單擊 Configuration 選項(xiàng)卡（見(jiàn) 圖 2）。
   4. 單擊 Extensions 選項(xiàng)卡。
   5. 定位到列表中的 curl - cURL 并單擊 Enable/Disable 欄中的紅色圓圈，讓紅色圓圈變成綠色的。
   6. 定位到列表中的 mysqli - MySQL improved 并單擊 Enable/Disable 欄中的紅色圓圈，讓紅色圓圈變成綠色的。
   7. 單擊頁(yè)面右上角的 Save Settings。
   8. 單擊 Logout。
7. 單擊任務(wù)欄中的 Apache 面板圖標(biāo)并選擇 Apache2 HTTP Server->Restart。

安裝 Eclipse 的 PHP Development Tool（PDT）

到編寫本文時(shí)，PDT 只是候選插件，還不是完整發(fā)布的 Eclipse 平臺(tái)插件。執(zhí)行以下步驟來(lái)安裝和配置 Eclipse PDT。（從 Eclipse 和 Zend Web 站點(diǎn)都可以獲得 PDT。Zend Web 站點(diǎn)提供的版本與 Eclipse Web 站點(diǎn)相同，但是增加了 Zend 的 PHP 調(diào)試工具。）

1. 通過(guò) 參考資料 一節(jié)中的鏈接，訪問(wèn) zend.com 上的 Eclipse PDT 下載頁(yè)面。
   1. 下載 Version 0.7 RC3 或更高版本，并將 .zip 文件存儲(chǔ)在 c:\temp\dw-ajax 目錄中。（例如，pdt-0.7.0.S20070401-RC3_debugger-0.1.7-all-in-one-win32.zip 或更高版本。）
   2. 如果要安裝 pdt-0.7.0.S20070401-RC3 之外的 PDT 版本，那么在下面的步驟中要換用正確的版本號(hào)，還要改變 清單 1 中的 Zend 調(diào)試器目錄名。
2. 將 Eclipse PDT Zip 文件解壓到 c:\（例如，unzip.exe pdt-0.7.0.S20070401-RC3_debugger-0.1.7-all-in-one-win32.zip -d c:\。這應(yīng)該會(huì)建立一個(gè)稱為 c:\eclipse 的目錄，其中包含 PDT 文件。）
3. 創(chuàng)建一個(gè) Eclipse 工作區(qū)目錄（例如，md c:\eclipse\workspace）。
4. 用 MySQL 庫(kù)配置 PDT：
   1. 通過(guò) 參考資料 一節(jié)中的鏈接，訪問(wèn) MySQL PHP 連接器 Web 站點(diǎn)。
   2. 單擊 mysqli 擴(kuò)展（PHP 5.2.0）的鏈接。
   3. 下載 .zip 文件（例如，php_5.2.0_mysqli_5.0.27-win32.zip），將它存儲(chǔ)在 c:\temp\dw-ajax 目錄中。
5. 將 .zip 文件解壓到 c:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5 目錄中（Unzip.exe php_5.2.0_mysqli_5.0.27-win32.zip -d C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5）。
6. 編輯 C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5\php.ini 文件，將這個(gè)文件中的所有內(nèi)容替換為 清單 1 中的內(nèi)容。做以下修改并保存文件：
   1. 在替換 php.ini 文件的內(nèi)容之后，合并 [Zend] 部分下面的前兩行，如下所示：extension_dir=C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5
   2. 如果需要，根據(jù) Eclipse 安裝中的 Zend 調(diào)試器目錄名修改它。
7. 轉(zhuǎn)到 c:\eclipse 目錄并輸入 eclipse.exe 來(lái)啟動(dòng) Eclipse。
8. 在 Workspace Launcher 對(duì)話框中，將工作區(qū)改為 c:\eclipse\workspace 并單擊 OK。
9. 關(guān)閉 Eclipse IDE 中的 Welcome 選項(xiàng)卡。
10. 在 Eclipse IDE 中，選擇 Window->Open Perspective->Other，選擇 PHP 并單擊 OK。
11. 在 IDE 左下角，選擇 PHP Functions 視圖。確保能夠看到內(nèi)置的 PHP 庫(kù)函數(shù)的列表。
12. 在 Eclipse 中，單擊 Window->Preferences：
    1. 展開(kāi)并選擇 PHP->Debug。
    2. 選擇 Break at First Line 復(fù)選框并單擊 Apply。
    3. 在相同的 PHP Debug 頁(yè)面上，選擇 Debug Options 部分中的 PHP Servers ...。
    4. 在列表中，選擇 Default PHP Web Server 并單擊 Edit。
    5. 選擇 Publish Projects to this Server 復(fù)選框。
    6. 在 Directory 域中，瀏覽到 c:\Program Files\Zend\Apache2\htdocs 并單擊 OK。（見(jiàn) 圖 3。）
    7. 單擊 OK。
    8. 再次單擊 OK 關(guān)閉 Preferences 對(duì)話框。
13. 選擇 Window->Web Browser->Firefox。

                
; Remember to merge the first two lines below the [Zend] section
; to appear in one line.
; Otherwise, Eclipse PDT (PHP Development Tool) will not work properly.
; If needed, modify it with the correct Zend debugger directory name
; as in your Eclipse installation.

[Zend]
extension_dir=
  C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5
include_path="."
extension=php_mysqli.dll
zend_extension_ts=.\ZendDebugger.dll
zend_debugger.allow_tunnel=127.0.0.1/32
zend_debugger.allow_hosts=127.0.0.1/32
zend_debugger.expose_remotely=always

安裝 Aptana Web IDE

安裝 Aptana Web IDE 只需在前面安裝的 Eclipse PDT 中添加一個(gè)插件。在編寫本文時(shí)，Aptana Web IDE 的版本是 0.2.8.14433。執(zhí)行以下步驟來(lái)安裝 Ajax 開(kāi)發(fā)所需的 Aptana Web IDE 的最新版本：

1. 在 Eclipse 的 Help 菜單中，選擇 Software Updates->Find and Install...，這會(huì)打開(kāi) Install/Update 彈出窗口。
   1. 在 Install/Update 彈出窗口中，選擇 Search for new features to install 選項(xiàng)并單擊 Next。
   2. 為了設(shè)置新的遠(yuǎn)程更新站點(diǎn)，單擊 New Remote Site... 按鈕，這會(huì)打開(kāi) New Update Site 彈出窗口。
   3. 在 New Update Site 彈出窗口中，在 Site Name 文本框中輸入 Aptana。
   4. 在 URL 文本框中，輸入 Aptana 更新站點(diǎn)的 URL：http://update.aptana.com/install/3.2/ 并單擊 OK。
   5. 單擊 Finish 打開(kāi) Updates 窗口。
   6. 在 Updates 窗口中，選擇 Aptana update 復(fù)選框并單擊 Next。
   7. 接受許可協(xié)議的條款并單擊 Next。
   8. 單擊 Finish。
   9. 如果出現(xiàn) Feature Verification 對(duì)話框，那么選擇 Install All。
   10. 如果提示您重新啟動(dòng) Eclipse，單擊 Yes 進(jìn)行重新啟動(dòng)。
2. 在 Eclipse IDE 中，選擇 Window->Open Perspective->Other，選擇 Aptana 并單擊 OK。如果出現(xiàn) Aptana 透視圖，就說(shuō)明安裝已經(jīng)完成了。

如果到目前為止所有操作都正常，就已經(jīng)設(shè)置了完整的 Eclipse IDE，可以使用它開(kāi)發(fā)、測(cè)試和調(diào)試銀行場(chǎng)景應(yīng)用程序的工件，比如 XHTML、JavaScript、XHR、PHP 和 MySQL 代碼。還可以配置 Eclipse IDE 來(lái)使用 Zend Core PHP 服務(wù)器。Eclipse 和 Zend Core 的高效組合能夠滿足所有 Ajax 開(kāi)發(fā)和部署需求。現(xiàn)在，我們來(lái)考慮一個(gè)比較復(fù)雜的場(chǎng)景，我們將在這個(gè)強(qiáng)大的環(huán)境中開(kāi)發(fā)和部署這個(gè)場(chǎng)景。

基于 Ajax 和 PHP 的場(chǎng)景

圖 4 描述一個(gè)比較復(fù)雜的場(chǎng)景，它在一個(gè) Ajax-PHP 環(huán)境中提供與銀行相關(guān)的某些功能。這個(gè)場(chǎng)景介紹一些技術(shù)組件，并按照傳統(tǒng)的體系結(jié)構(gòu)劃分成以下三層：

• 客戶端
• 中間層
• 數(shù)據(jù)層

在客戶端，這個(gè)場(chǎng)景使用基于瀏覽器的控件，這些控件是通過(guò)單頁(yè)面 XHTML 用戶界面元素以及 XHR 和 JSON 啟用的。在中間層，它使用 PHP 技術(shù)，比如 SimpleXML、Services_JSON、HTTP 請(qǐng)求處理程序和 PHP SOAP 客戶機(jī)。在數(shù)據(jù)層，它使用 SQL 和 ODBC。

還可以根據(jù)應(yīng)用的技術(shù)組件劃分這個(gè)場(chǎng)景：

• 瀏覽器
• PHP 服務(wù)器
• PHP Web 服務(wù)客戶機(jī)
• 數(shù)據(jù)庫(kù)服務(wù)器
• 互聯(lián)網(wǎng)上駐留的基于 .NET 的第三方 Web 服務(wù)

可以看到，這個(gè)場(chǎng)景滿足 Ajax 環(huán)境的基本因素和重要因素。在眾多的技術(shù)解決方案中，將選擇一種特殊的實(shí)現(xiàn)方式，從而幫助您從這個(gè)場(chǎng)景獲得盡可能多的收獲。總的設(shè)計(jì)目標(biāo)是不要讓場(chǎng)景復(fù)雜化，所以在客戶端上不提供不必要的浮華的屏幕。我希望讓您更輕松地理解在 Eclipse IDE（PDT 和 Aptana）和 Zend Core 中開(kāi)發(fā)和部署各種場(chǎng)景工件所涉及的細(xì)節(jié)。另外，這個(gè)場(chǎng)景還從 PHP Web 服務(wù)客戶機(jī)訪問(wèn)互聯(lián)網(wǎng)上駐留的一個(gè)基于 .NET 的真實(shí)的 Web 服務(wù)，以此演示互操作性。正如前面指出的，為了將注意力放在所選的開(kāi)放源碼軟件的核心功能上，這個(gè)場(chǎng)景沒(méi)有考慮安全性、可伸縮性和可用性特性 —— 您應(yīng)該通過(guò)其他資料學(xué)習(xí)這些特性。

場(chǎng)景細(xì)節(jié)

在閱讀下面幾節(jié)時(shí)，請(qǐng)參考 圖 4 來(lái)理解場(chǎng)景的細(xì)節(jié)。這個(gè)場(chǎng)景主要在 Ajax 和 PHP 環(huán)境中實(shí)現(xiàn)幾個(gè)常用的銀行出納功能。本節(jié)描述組成這個(gè)場(chǎng)景的各個(gè)模塊。

銀行數(shù)據(jù)（MySQL）—— 數(shù)據(jù)

銀行的客戶信息保存在一個(gè)數(shù)據(jù)庫(kù)表中。我將在 MySQL 數(shù)據(jù)庫(kù)中創(chuàng)建這個(gè)表。它是一個(gè)緊湊但強(qiáng)大的社區(qū)版服務(wù)器。對(duì)于本系列的場(chǎng)景，所有客戶數(shù)據(jù)將同時(shí)填充進(jìn)數(shù)據(jù)庫(kù)表中。在此之后，可以通過(guò) Zend Core 提供的 ODBC 驅(qū)動(dòng)程序獲取和更新存儲(chǔ)的客戶數(shù)據(jù)。數(shù)據(jù)庫(kù)訪問(wèn)的類型（比如讀或?qū)懀⒏鶕?jù)銀行出納功能的性質(zhì)決定。

銀行邏輯功能（PHP 代碼）—— 模型

現(xiàn)在，考慮提供銀行出納功能所需的核心銀行邏輯。在這個(gè)場(chǎng)景中，需要支持下面的銀行出納功能：

• 獲得銀行中所有客戶的帳戶信息。
• 在特定的帳戶中存款。
• 從特定的帳戶中取款。
• 為特定的帳戶提供經(jīng)過(guò)整理的資產(chǎn)報(bào)告。

因?yàn)檫@四個(gè)功能都需要訪問(wèn)數(shù)據(jù)庫(kù)，所以創(chuàng)建一個(gè) PHP 文件來(lái)提供必需的數(shù)據(jù)庫(kù)功能。它將數(shù)據(jù)庫(kù)功能與其他中間層邏輯隔離開(kāi)。通過(guò)以這種方式提供核心的銀行出納功能，就可以向這些功能的所有調(diào)用者提供以一致的方式包裝的數(shù)據(jù)庫(kù)結(jié)果。一個(gè) PHP 關(guān)聯(lián)數(shù)組用來(lái)傳遞核心銀行邏輯的結(jié)果。

Bank Portal 用戶界面（Ajax）—— 視圖

現(xiàn)在，考慮為銀行出納員提供執(zhí)行四個(gè)核心功能的用戶界面。可以通過(guò)胖客戶端或瘦客戶端訪問(wèn) PHP 代碼中封裝的核心銀行邏輯。這個(gè)場(chǎng)景為銀行出納員開(kāi)發(fā)一個(gè)單頁(yè)面的 Ajax 瀏覽器用戶界面。

在中間層上使用 PHP 時(shí)，一種常見(jiàn)的做法是用 PHP 代碼輸出必需的 XHTML、CSS 和 JavaScript。在這個(gè)場(chǎng)景中，我們完全不用 PHP 代碼輸出任何客戶機(jī)用戶界面代碼。這意味著與 Bank Portal 相關(guān)聯(lián)的所有代碼都只在客戶機(jī)啟動(dòng)時(shí)提供。我們將用 XHTML 和 CSS 編寫所有用戶界面元素，用 JavaScript 編寫客戶端邏輯。這些工件（XHTML、CSS 和 JavaScript）共同產(chǎn)生所有用戶界面元素，可以滿足銀行場(chǎng)景中 Bank Portal 的需求。這意味著，Apache Web 服務(wù)器只需要向?yàn)g覽器傳遞一次客戶機(jī)用戶界面內(nèi)容。這個(gè)一次性的代碼傳遞過(guò)程發(fā)生在銀行出納員訪問(wèn)這個(gè)應(yīng)用程序的 URL 時(shí)。在此之后，Bank Portal 客戶機(jī)只會(huì)為了交換數(shù)據(jù)而與服務(wù)器進(jìn)行通信，而不是為了獲取 XHTML、CSS 和 JavaScript 等表示內(nèi)容。

這就擯棄了傳統(tǒng)的單擊并等待 范例；在傳統(tǒng)范例中，對(duì)于每次用戶操作，瀏覽器都會(huì)與中間層服務(wù)器進(jìn)行通信來(lái)下載表示內(nèi)容。單頁(yè)面 Ajax 應(yīng)用程序的杰出特性之一是，在啟動(dòng)時(shí)下載一次表示內(nèi)容，之后就不需要再?gòu)姆?wù)器獲取頁(yè)面。在啟動(dòng)之后，單頁(yè)面 Ajax 客戶機(jī)應(yīng)用程序與中間層服務(wù)器邏輯進(jìn)行通信，只是為了進(jìn)行應(yīng)用程序特有的數(shù)據(jù)交換。因此，中間層邏輯會(huì)更緊湊，它只關(guān)注業(yè)務(wù)邏輯，而不需要承擔(dān)向?yàn)g覽器傳遞表示內(nèi)容的責(zé)任。這種方式可以更好地隔離應(yīng)用程序?qū)樱a(chǎn)生干凈優(yōu)雅的 Web 應(yīng)用程序設(shè)計(jì)。

Bank Actions 模塊（PHP 代碼）—— 控制器

討論了瀏覽器用戶界面之后，就應(yīng)該考慮如何通過(guò)網(wǎng)絡(luò)執(zhí)行銀行出納員選擇的銀行操作。在這個(gè)場(chǎng)景中，將出納員選擇的 Bank Action 命令和所需的輸入數(shù)據(jù)發(fā)送給一個(gè) PHP 代碼模塊，這個(gè)模塊作為瀏覽器和（前一節(jié)描述的）PHP 模塊中的核心銀行邏輯之間的代理/中間人。Bank Actions PHP 模塊支持以 REST 風(fēng)格調(diào)用中間層中的服務(wù)功能。Bank Actions PHP 模塊接收 Bank teller Action 命令并對(duì) Bank Logic PHP 模塊進(jìn)行調(diào)用來(lái)獲得所需的結(jié)果。調(diào)用適當(dāng)?shù)你y行邏輯來(lái)訪問(wèn)數(shù)據(jù)庫(kù)并獲得結(jié)果。Bank Logic 模塊返回之后，Bank Actions 模塊將結(jié)果以 JSON 格式傳遞給瀏覽器。總之，Bank Actions PHP 模塊是銀行出納員請(qǐng)求的調(diào)度器，它調(diào)用適當(dāng)?shù)?Bank Logic 功能來(lái)處理這些請(qǐng)求。

XML Web 服務(wù)客戶機(jī)（從 PHP 對(duì) .NET 服務(wù)進(jìn)行 SOAP 訪問(wèn)）—— Helper

除了作為代理/中間人之外，Bank Actions PHP 模塊還作為一個(gè) PHP Web 服務(wù) SOAP 客戶機(jī)，它可以獲得特定客戶的投資組合中當(dāng)前股票的價(jià)值。這可以幫助您學(xué)習(xí)如何用 PHP 生成 Web 服務(wù)客戶機(jī)。在這個(gè)場(chǎng)景中，Bank Actions PHP 模塊對(duì)一個(gè)在互聯(lián)網(wǎng)上運(yùn)行的真實(shí)的遠(yuǎn)程 Web 服務(wù)進(jìn)行 SOAP XML Web 服務(wù)調(diào)用。這個(gè) Web 服務(wù)是一個(gè)基于 .NET 的 Web 服務(wù)，這可以讓您體會(huì)一下 PHP 的互操作特性。您還會(huì)學(xué)到使用 PHP SimpleXML API 進(jìn)行 XML 解析的知識(shí)。

現(xiàn)在，您應(yīng)該對(duì)這個(gè)場(chǎng)景的高層設(shè)計(jì)目標(biāo)有了清晰的認(rèn)識(shí)。這一概述應(yīng)該足以幫助您開(kāi)發(fā)、測(cè)試、集成和部署銀行場(chǎng)景中的核心模塊。

主要的場(chǎng)景任務(wù)

在這個(gè)文章系列的第 2 部分和第 3 部分中，將執(zhí)行以下任務(wù)來(lái)完成這個(gè)場(chǎng)景，使它達(dá)到可運(yùn)行的狀態(tài)，并講解在 Eclipse IDE 中開(kāi)發(fā)它以及在 Zend Core 中部署它的底層技術(shù)：

• 任務(wù) 1：創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)表來(lái)保存銀行客戶帳戶信息。
• 任務(wù) 2：創(chuàng)建一個(gè) PHP 代碼模塊來(lái)執(zhí)行必需的業(yè)務(wù)邏輯和數(shù)據(jù)庫(kù)調(diào)用。
• 任務(wù) 3：創(chuàng)建 XHTML 和 CSS 工件來(lái)提供單頁(yè)面 Ajax Web 用戶界面。
• 任務(wù) 4：創(chuàng)建一個(gè) JavaScript 模塊，它包含所有客戶端邏輯和異步通信邏輯，用來(lái)與服務(wù)器進(jìn)行數(shù)據(jù)交換。
• 任務(wù) 5：創(chuàng)建一個(gè) PHP 代碼模塊，它包含針對(duì)一個(gè)遠(yuǎn)程股票報(bào)價(jià) Web 服務(wù)的 Web 服務(wù) SOAP 客戶機(jī)代碼。
• 任務(wù) 6：創(chuàng)建一個(gè) PHP 代碼模塊，它將作為 REST 服務(wù)，將調(diào)用轉(zhuǎn)發(fā)給另外兩個(gè) PHP 文件中的業(yè)務(wù)邏輯。
• 任務(wù) 7：將所有工件集成起來(lái)，部署并運(yùn)行為銀行場(chǎng)景創(chuàng)建的 Ajax 解決方案。

結(jié)束語(yǔ)

簡(jiǎn)單和低成本促使革命性的 Web 平臺(tái)在世界各地的廣大用戶中流行起來(lái)了。尤其是，開(kāi)放源碼的 Eclipse 工具和 Zend Core 一起提供了很大的功能，使各個(gè)組織開(kāi)始考慮從 .NET 環(huán)境這樣的專有平臺(tái)遷移到開(kāi)放源碼平臺(tái)。對(duì)于這些客戶，這些軟件提供了一個(gè)出色的零成本的開(kāi)發(fā)和部署環(huán)境，并且可以與現(xiàn)有的專有基礎(chǔ)設(shè)施共存。在本系列的第 2 部分中，您將體會(huì)真實(shí)而有趣的 Ajax-PHP 開(kāi)發(fā)。在學(xué)習(xí)第 2 部分之前，請(qǐng)盡量熟悉 Eclipse PDT、Aptana 插件和 Zend Core 運(yùn)行時(shí)的特性。

參考資料

• 您可以參閱本文在 developerWorks 全球站點(diǎn)上的 英文原文 。
  
  
• 閱讀 developerWorks 上 Ajax 技術(shù)資源中心 中關(guān)于 Ajax 的文章和教程。
  
  
• 閱讀 developerWorks 上 PHP 資源中心 中關(guān)于 PHP 的文章和教程。
  
  
• 閱讀 PHP Manual Web 站點(diǎn) 上的 PHP API 文檔。
  
  
• 了解 Eclipse PDT 項(xiàng)目。
  
  
• 了解 Aptana Web IDE。
  
  
• 閱讀 Jesse James Garrett 所寫的 “Ajax: A New Approach to Web Applications”，他在這篇文章中首創(chuàng)了 Ajax 這個(gè)詞。
  
  
• 進(jìn)一步了解 Zend Core。
  
  
• 閱讀關(guān)于 XMLHttpRequest 的 W3C Working Draft。

• 從 Mozilla 下載 Web 站點(diǎn) 下載 Mozilla Firefox 瀏覽器。
  
  
• 從 MySQL 下載 Web 站點(diǎn) 下載 MySQL 數(shù)據(jù)庫(kù)服務(wù)器。
  
  
• 從 Zend 下載 Web 站點(diǎn) 下載 Zend Core。
  
  
• 從 Zend PDT 下載 Web 站點(diǎn) 下載 Eclipse PDT（PHP Development Tools）。
  
  
• 從 MySQL 連接器下載 Web 站點(diǎn) 下載 MySQL PHP 連接器。