開發端到端的 Ajax 應用程式，第 1 部分: 用一個情境設定 Ajax 環境

Ajax（Asynchronous JavaScript + XML）正在迅速地成為時髦的技術，它可以為在瀏覽器中啟動並執行 Web 應用程式提供具有案頭品質的軟體特性。開放源碼軟體（比如 Linux-Apache-MySQL-PHP，即 LAMP）和基於開放標準的 Java 2 Platform, Enterprise Edition 中介軟體（比如 IBM WebSphere Application Server Community Edition）為開發和部署 Ajax Web 應用程式提供了出色的支援。這個分三部分的系列討論如何使用開放源碼中介軟體開發端到端 Ajax 應用程式，本文是這個系列的第一篇文章。如果您是 Web 開發的新手，但是可以閱讀和理解用 XHTML、CSS、JavaScript、PHP 和 SQL 編寫的代碼，那麼本文正適合您。讀完本文之後，您會很好地理解 Ajax 的基本概念以及 Ajax 在三層 Web 應用程式情境中可能產生的作用。

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

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

典型的企業級 Web 應用程式要處理許多因素，從而保證高度健壯。為了學習所選的開放源碼軟體的核心功能，我們的情境不考慮安全性、延展性和可用性等關鍵的企業級特性，您應該通過其他資料學習這些特性。本文中的所有討論只適用於我們情境中描述的一類 Ajax 應用程式。具體地說，這個系列詳細討論如何建立 MySQL 資料庫，在 PHP 運行時環境中設計和開發中介層/資料庫邏輯，然後使用 JavaScript 建立一個真正的單頁面 Ajax 客戶機介面。這個系列包含程式碼範例，介紹在 Eclipse 中開發與測試 Ajax 應用程式所需的步驟，解釋如何在 Firefox（用戶端）、Zend PHP（中介層）和 MySQL（資料層）中部署 Ajax 應用程式。這個端到端應用程式涉及 XHTML、CSS、JavaScript、XHR、DOM、REST、SOAP、JSON、XML、PHP、MySQL 和 Eclipse 的綜合運用，涉及前面提到的開放源碼平台的許多內建特性。簡言之，這個系列是介紹如何在應用程式層之間進行適當的隔離，從而形成乾淨優雅的 Web 應用程式。

簡介

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

• 用戶端
• 中介層
• 資料層

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

為了進行端到端 Ajax 應用程式開發，需要按照下面幾節中的步驟安裝和配置運行時環境和開發環境。然後，我們並不按慣例提供 Hello World 應用程式，而是分析一個比較複雜的銀行情境。這個情境在一個虛構的銀行環境中解釋前面提到的所有技術的使用方法，其中涉及銀行的後端資料庫、基於瀏覽器的銀行客戶門戶以及一個真實的第三方金融 Web 服務。

所需的軟體包

為了開發和部署跨越所有三個應用程式層的銀行情境，需要為這些層中的以下組件選擇軟體：

• 網頁瀏覽器
• 資料庫伺服器
• Web 服務器
• 中介層伺服器
• 用於中介層代碼開發的 IDE
• 用於用戶端代碼開發的 IDE

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

網頁瀏覽器：Mozilla Firefox 2.0.0.4 或更高版本。Firefox 具有許多優點，包括可用性、線上安全性以及能夠通過眾多的擴充應用程式進行定製。還要使用 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。它得到強有力的社區支援。它包含 Apache Web 服務器，並支援 MySQL、IBM DB2 和 Oracle 等資料庫。Zend Core for IBM 專門針對 IBM DB2 進行過調優。圖 1 給出 Zend Core 的概況。

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

用戶端識別碼E：Aptana Web IDE 0.2.8.14433 或更高版本。這是一個免費的開放源碼的跨平台的以 JavaScript 為中心的開發環境，可以用來開發 Ajax 瀏覽器應用程式。它為 JavaScript、HTML 和 CSS 提供編碼支援。它支援 JavaScript 調試，並內建了對幾種 Ajax 架構的支援。除此之外，它還是基於 Eclipse 的。

按照下面幾節中的步驟安裝和設定這些開放源碼軟體包，從而建立開發和部署端到端 Ajax 應用程式的環境。（注意：本文中的所有安裝和開發說明都針對 Microsoft Windows 作業系統。）

圖 1. Zend Core 概況

安裝 Mozilla Firefox

按照以下步驟安裝 Mozilla Firefox：

1. 建立一個稱為 c:\temp\dw-ajax 的臨時目錄，可以在這裡儲存不同軟體包的所有安裝檔案。
2. 通過 參考資料 一節中的 Mozilla URL 下載 Mozilla Firefox 2.0.0.4 或更高版本，並將它儲存到 c:\temp\dw-ajax 中。
3. 通過運行第 2 步中下載的檔案，安裝 Mozilla Firefox 2.0.0.4：
   1. 在 Mozilla 安裝嚮導中，單擊 Next。
   2. 接受許可協議並單擊 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 瀏覽器並訪問 參考資料 一節中的 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

執行以下步驟來安裝 MySQL 資料庫伺服器：

1. 訪問 參考資料 一節中的 MySQL URL。
2. 單擊 MySQL Community Server。（這時一般會直接轉到當前推薦的 GA 版本。）
3. 下載 5.0.41 或更高版本的 Windows (x86) Zip/Setup.EXE 並將它儲存在 c:\temp\dw-ajax 目錄中。（這個 .zip 檔案只包含一個檔案，這是 MySQL 的可執行安裝檔案。）
4. 從 .zip 檔案中提取出 MySQL 的可執行安裝檔案並將它儲存在 c:\temp\dw-ajax 目錄中。
5. 運行第 4 步中提取出的可執行檔（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 服務器。執行以下步驟來安裝 Apache Web 服務器和 Zend Core PHP 伺服器。

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

1. 在 Zend Web 網站上註冊之後，訪問 參考資料 中的 Zend Core URL 並登入進下載地區。
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 的可執行安裝檔案。）
4. 從 .zip 檔案中提取出 Zend Core 的可執行安裝檔案並將它儲存在 c:\temp\dw-ajax 目錄中。
5. 運行 ZendCore-v2.0.1-Windows-x86.exe 或更高版本：
   1. 單擊 Next。
   2. 接受許可協議並單擊 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++ 的可重新發布版本。在此之後，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。

圖 2. Zend Core 配置螢幕

安裝 Eclipse 的 PHP Development Tool（PDT）

到編寫本文時，PDT 只是候選外掛程式，還不是完整發布的 Eclipse 平台外掛程式。執行以下步驟來安裝和配置 Eclipse PDT。（從 Eclipse 和 Zend Web 網站都可以獲得 PDT。Zend Web 網站提供的版本與 Eclipse Web 網站相同，但是增加了 Zend 的 PHP 調試工具。）

1. 通過 參考資料 一節中的連結，訪問 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. 建立一個 Eclipse 工作區目錄（例如，md c:\eclipse\workspace）。
4. 用 MySQL 庫配置 PDT：
   1. 通過 參考資料 一節中的連結，訪問 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 對話方塊中，將工作區改為 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。

清單 1. php.ini 檔案的內容

; 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

圖 3. Eclipse PDT 配置

安裝 Aptana Web IDE

安裝 Aptana Web IDE 只需在前面安裝的 Eclipse PDT 中添加一個外掛程式。在編寫本文時，Aptana Web IDE 的版本是 0.2.8.14433。執行以下步驟來安裝 Ajax 開發所需的 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. 接受許可協議的條款並單擊 Next。
   8. 單擊 Finish。
   9. 如果出現 Feature Verification 對話方塊，那麼選擇 Install All。
   10. 如果提示您重新啟動 Eclipse，單擊 Yes 進行重新啟動。
2. 在 Eclipse IDE 中，選擇 Window->Open Perspective->Other，選擇 Aptana 並單擊 OK。如果出現 Aptana 透視圖，就說明安裝已經完成了。

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

基於 Ajax 和 PHP 的情境

圖 4 描述一個比較複雜的情境，它在一個 Ajax-PHP 環境中提供與銀行相關的某些功能。這個情境介紹一些技術組件，並按照傳統的體繫結構劃分成以下三層：

• 用戶端
• 中介層
• 資料層

在用戶端，這個情境使用基於瀏覽器的控制項，這些控制項是通過單頁面 XHTML 使用者介面元素以及 XHR 和 JSON 啟用的。在中介層，它使用 PHP 技術，比如 SimpleXML、Services_JSON、HTTP 要求處理常式和 PHP SOAP 客戶機。在資料層，它使用 SQL 和 ODBC。

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

• 瀏覽器
• PHP 伺服器
• PHP Web 服務客戶機
• 資料庫伺服器
• 互連網上駐留的基於 .NET 的第三方 Web 服務

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

圖 4. 銀行情境

情境細節

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

銀行資料（MySQL）—— 資料

銀行的客戶資訊儲存在一個資料庫表中。我將在 MySQL 資料庫中建立這個表。它是一個緊湊但強大的社區版伺服器。對於本系列的情境，所有客戶資料將同時填充進資料庫表中。在此之後，可以通過 Zend Core 提供的 ODBC 驅動程式擷取和更新儲存的客戶資料。資料庫訪問的類型（比如讀或寫）將根據銀行出納功能的性質決定。

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

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

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

因為這四個功能都需要訪問資料庫，所以建立一個 PHP 檔案來提供必需的資料庫功能。它將資料庫功能與其他中介層邏輯隔離開。通過以這種方式提供核心的銀行出納功能，就可以向這些功能的所有調用者提供以一致的方式封裝的資料庫結果。一個 PHP 關聯陣列用來傳遞核心銀行邏輯的結果。

Bank Portal 使用者介面（Ajax）—— 視圖

現在，考慮為銀行出納員提供執行四個核心功能的使用者介面。可以通過胖用戶端或瘦用戶端訪問 PHP 代碼中封裝的核心銀行邏輯。這個情境為銀行出納員開發一個單頁面的 Ajax 瀏覽器使用者介面。

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

這就擯棄了傳統的單擊並等待 範例；在傳統範例中，對於每次使用者操作，瀏覽器都會與中介層伺服器進行通訊來下載表示內容。單頁面 Ajax 應用程式的傑出特性之一是，在啟動時下載一次表示內容，之後就不需要再從伺服器擷取頁面。在啟動之後，單頁面 Ajax 客戶機應用程式與中介層伺服器邏輯進行通訊，只是為了進行應用程式特有的資料交換。因此，中介層邏輯會更緊湊，它只關注商務邏輯，而不需要承擔向瀏覽器傳遞表示內容的責任。這種方式可以更好地隔離應用程式層，產生乾淨優雅的 Web 應用程式設計。

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

討論了瀏覽器使用者介面之後，就應該考慮如何通過網路執行銀行出納員選擇的銀行操作。在這個情境中，將出納員選擇的 Bank Action 命令和所需的輸入資料發送給一個 PHP 代碼模組，這個模組作為瀏覽器和（前一節描述的）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 解析的知識。

現在，您應該對這個情境的高層設計目標有了清晰的認識。這一概述應該足以協助您開發、測試、整合和部署銀行情境中的核心模組。

主要的情境任務

在這個文章系列的第 2 部分和第 3 部分中，將執行以下任務來完成這個情境，使它達到可啟動並執行狀態，並講解在 Eclipse IDE 中開發它以及在 Zend Core 中部署它的底層技術：

• 任務 1：建立一個資料庫表來儲存銀行客戶帳戶資訊。
• 任務 2：建立一個 PHP 代碼模組來執行必需的商務邏輯和資料庫調用。
• 任務 3：建立 XHTML 和 CSS 工件來提供單頁面 Ajax Web 使用者介面。
• 任務 4：建立一個 JavaScript 模組，它包含所有用戶端邏輯和非同步通訊邏輯，用來與伺服器進行資料交換。
• 任務 5：建立一個 PHP 代碼模組，它包含針對一個遠程股票報價 Web 服務的 Web 服務 SOAP 客戶機代碼。
• 任務 6：建立一個 PHP 代碼模組，它將作為 REST 服務，將調用轉寄給另外兩個 PHP 檔案中的商務邏輯。
• 任務 7：將所有工件整合起來，部署並運行為銀行情境建立的 Ajax 解決方案。

結束語

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