隔離應用程序層來產生干凈優(yōu)雅的 Web 應用程序

級別： 中級

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

2007 年 6 月 20 日

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

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

請訪問 Ajax 技術資源中心，這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何關于 Ajax 的新信息都能在這里找到。

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

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

簡介

正如標題所指出的，這個分三部分的系列將詳細介紹開發(fā)端到端 Ajax 應用程序的一些核心功能。這些功能包括以下三個應用程序層中的特定技術：

• 客戶端
• 中間層
• 數據層

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

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

所需的軟件包

為了開發(fā)和部署跨越所有三個應用程序層的銀行場景，需要為這些層中的以下組件選擇軟件：

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

有許多開放源碼軟件可以滿足各個層的需要，本系列中的場景選用以下軟件：

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

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

Web 服務器：Apache Web server 2.2.2。Apache 允許進行靈活的配置，并可以用第三方模塊進行擴展。

中間層服務器：Zend Core 2.0.1 或更高版本。這種免費的開放源碼服務器支持 PHP 5。它得到強有力的社區(qū)支持。它包含 Apache Web 服務器，并支持 MySQL、IBM DB2® 和 Oracle 等數據庫。Zend Core for IBM 專門針對 IBM DB2 進行過調優(yōu)。圖 1 給出 Zend Core 的概況。

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

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

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

安裝 Mozilla Firefox

按照以下步驟安裝 Mozilla Firefox：

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

安裝 MySQL

執(zhí)行以下步驟來安裝 MySQL 數據庫服務器：

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

安裝 Apache Web 服務器和 Zend Core PHP 服務器

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

為了免費下載 Zend Core，必須在 Zend Web 站點上注冊。如果還沒有注冊，那么訪問 參考資料 中的 Zend Core URL 并注冊。

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

安裝 Eclipse 的 PHP Development Tool（PDT）

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

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

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

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

基于 Ajax 和 PHP 的場景

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

• 客戶端
• 中間層
• 數據層

在客戶端，這個場景使用基于瀏覽器的控件，這些控件是通過單頁面 XHTML 用戶界面元素以及 XHR 和 JSON 啟用的。在中間層，它使用 PHP 技術，比如 SimpleXML、Services_JSON、HTTP 請求處理程序和 PHP SOAP 客戶機。在數據層，它使用 SQL 和 ODBC。

還可以根據應用的技術組件劃分這個場景：

• 瀏覽器
• PHP 服務器
• PHP Web 服務客戶機
• 數據庫服務器
• 互聯網上駐留的基于 .NET 的第三方 Web 服務

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

場景細節(jié)

在閱讀下面幾節(jié)時，請參考 圖 4 來理解場景的細節(jié)。這個場景主要在 Ajax 和 PHP 環(huán)境中實現幾個常用的銀行出納功能。本節(jié)描述組成這個場景的各個模塊。

銀行數據（MySQL）—— 數據

銀行的客戶信息保存在一個數據庫表中。我將在 MySQL 數據庫中創(chuàng)建這個表。它是一個緊湊但強大的社區(qū)版服務器。對于本系列的場景，所有客戶數據將同時填充進數據庫表中。在此之后，可以通過 Zend Core 提供的 ODBC 驅動程序獲取和更新存儲的客戶數據。數據庫訪問的類型（比如讀或寫）將根據銀行出納功能的性質決定。

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

現在，考慮提供銀行出納功能所需的核心銀行邏輯。在這個場景中，需要支持下面的銀行出納功能：

• 獲得銀行中所有客戶的帳戶信息。
• 在特定的帳戶中存款。
• 從特定的帳戶中取款。
• 為特定的帳戶提供經過整理的資產報告。

因為這四個功能都需要訪問數據庫，所以創(chuàng)建一個 PHP 文件來提供必需的數據庫功能。它將數據庫功能與其他中間層邏輯隔離開。通過以這種方式提供核心的銀行出納功能，就可以向這些功能的所有調用者提供以一致的方式包裝的數據庫結果。一個 PHP 關聯數組用來傳遞核心銀行邏輯的結果。

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

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

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

這就擯棄了傳統(tǒng)的單擊并等待 范例；在傳統(tǒng)范例中，對于每次用戶操作，瀏覽器都會與中間層服務器進行通信來下載表示內容。單頁面 Ajax 應用程序的杰出特性之一是，在啟動時下載一次表示內容，之后就不需要再從服務器獲取頁面。在啟動之后，單頁面 Ajax 客戶機應用程序與中間層服務器邏輯進行通信，只是為了進行應用程序特有的數據交換。因此，中間層邏輯會更緊湊，它只關注業(yè)務邏輯，而不需要承擔向瀏覽器傳遞表示內容的責任。這種方式可以更好地隔離應用程序層，產生干凈優(yōu)雅的 Web 應用程序設計。

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

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

XML Web 服務客戶機（從 PHP 對 .NET 服務進行 SOAP 訪問）—— Helper

除了作為代理/中間人之外，Bank Actions PHP 模塊還作為一個 PHP Web 服務 SOAP 客戶機，它可以獲得特定客戶的投資組合中當前股票的價值。這可以幫助您學習如何用 PHP 生成 Web 服務客戶機。在這個場景中，Bank Actions PHP 模塊對一個在互聯網上運行的真實的遠程 Web 服務進行 SOAP XML Web 服務調用。這個 Web 服務是一個基于 .NET 的 Web 服務，這可以讓您體會一下 PHP 的互操作特性。您還會學到使用 PHP SimpleXML API 進行 XML 解析的知識。

現在，您應該對這個場景的高層設計目標有了清晰的認識。這一概述應該足以幫助您開發(fā)、測試、集成和部署銀行場景中的核心模塊。

主要的場景任務

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

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

結束語

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

參考資料

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

• 從 Mozilla 下載 Web 站點 下載 Mozilla Firefox 瀏覽器。
  
  
• 從 MySQL 下載 Web 站點 下載 MySQL 數據庫服務器。
  
  
• 從 Zend 下載 Web 站點 下載 Zend Core。
  
  
• 從 Zend PDT 下載 Web 站點 下載 Eclipse PDT（PHP Development Tools）。
  
  
• 從 MySQL 連接器下載 Web 站點 下載 MySQL PHP 連接器。