Ajax(Asynchronous JavaScript + XML)正在迅速地成為時(shí)髦的技術(shù),它可以為在瀏覽器中運行的 Web 應用程序提供具有桌面質(zhì)量的軟件特性。開(kāi)放源碼軟件(比如 Linux-Apache-MySQL-PHP,即 LAMP)和基于開(kāi)放標準的 Java? 2 Platform, Enterprise Edition 中間件(比如 IBM? WebSphere? Application Server Community Edition)為開(kāi)發(fā)和部署 Ajax Web 應用程序提供了出色的支持。這個(gè)分三部分的系列討論如何使用開(kāi)放源碼中間件開(kāi)發(fā)端到端 Ajax 應用程序,本文是這個(gè)系列的第一篇文章。如果您是 Web 開(kāi)發(fā)的新手,但是可以閱讀和理解用 XHTML、CSS、JavaScript、PHP 和 SQL 編寫(xiě)的代碼,那么本文正適合您。讀完本文之后,您會(huì )很好地理解 Ajax 的基本概念以及 Ajax 在三層 Web 應用程序場(chǎng)景中可能產(chǎn)生的作用。 Ajax 是 Web 2.0 技術(shù)的一部分,近來(lái)得到了架構師、開(kāi)發(fā)人員、產(chǎn)品經(jīng)理和 Web 應用程序用戶(hù)的極大關(guān)注。Ajax 編程技術(shù)由一些已經(jīng)證明有效的技術(shù)組成,比如 XHTML、JavaScript、CSS 和 XML Http Request(XHR)。流行的服務(wù)訪(fǎng)問(wèn)和數據交換技術(shù),比如 Representational State Transfer(REST)和 JavaScript Object Notation(JSON),也非常適合 Ajax 技術(shù)??蛻?hù)端上已經(jīng)證明有效的這些技術(shù)可以與 PHP、Python 和 Ruby 等開(kāi)放源碼技術(shù)相結合,將 Ajax 擴展到中間層應用程序開(kāi)發(fā)領(lǐng)域。在這個(gè)組合之上,還可以用開(kāi)放源碼數據庫 MySQL 建立數據層。
與 Ajax 編程技術(shù)相匹配的其他技術(shù)包括同樣令人印象深刻的基于 Eclipse 的開(kāi)發(fā)工具,這些工具是開(kāi)放源碼的,可以免費下載和使用。前面提到的所有客戶(hù)端、中間層和數據層技術(shù)組合在一起,就形成了一個(gè)強大的 Web 應用程序開(kāi)發(fā)技術(shù)組合。但是,究竟如何開(kāi)發(fā)和部署端到端 Ajax 應用程序呢?這個(gè)分三部分的文章系列將帶領(lǐng)您研究一個(gè)端到端開(kāi)發(fā)場(chǎng)景,以此回答這個(gè)問(wèn)題。 典型的企業(yè)級 Web 應用程序要處理許多因素,從而保證高度健壯。為了學(xué)習所選的開(kāi)放源碼軟件的核心功能,我們的場(chǎng)景不考慮安全性、可伸縮性和可用性等關(guān)鍵的企業(yè)級特性,您應該通過(guò)其他資料學(xué)習這些特性。本文中的所有討論只適用于我們場(chǎng)景中描述的一類(lèi) Ajax 應用程序。具體地說(shuō),這個(gè)系列詳細討論如何創(chuàng )建 MySQL 數據庫,在 PHP 運行時(shí)環(huán)境中設計和開(kāi)發(fā)中間層/數據庫邏輯,然后使用 JavaScript 創(chuàng )建一個(gè)真正的單頁(yè)面 Ajax 客戶(hù)機界面。這個(gè)系列包含代碼示例,介紹在 Eclipse 中開(kāi)發(fā)和測試 Ajax 應用程序所需的步驟,解釋如何在 Firefox(客戶(hù)端)、Zend PHP(中間層)和 MySQL(數據層)中部署 Ajax 應用程序。這個(gè)端到端應用程序涉及 XHTML、CSS、JavaScript、XHR、DOM、REST、SOAP、JSON、XML、PHP、MySQL 和 Eclipse 的綜合運用,涉及前面提到的開(kāi)放源碼平臺的許多內置特性。簡(jiǎn)言之,這個(gè)系列是介紹如何在應用程序層之間進(jìn)行適當的隔離,從而形成干凈優(yōu)雅的 Web 應用程序。 正如標題所指出的,這個(gè)分三部分的系列將詳細介紹開(kāi)發(fā)端到端 Ajax 應用程序的一些核心功能。這些功能包括以下三個(gè)應用程序層中的特定技術(shù):
在客戶(hù)端中,包含 XHTML、CSS、JavaScript 和 XML Http Request(XHR)等技術(shù)。除了前面已經(jīng)提到的幾種中間層開(kāi)放源碼技術(shù)之外,這個(gè)系列還使用 PHP,這是因為 PHP 非常簡(jiǎn)單而且當前得到了廣泛應用。在數據層中使用 MySQL 數據庫。另外,這個(gè)系列使用流行的 Web 服務(wù)技術(shù),比如 REST、SOAP、JSON 和 XML。我們將在一個(gè)場(chǎng)景中綜合使用所有這些技術(shù)。 為了進(jìn)行端到端 Ajax 應用程序開(kāi)發(fā),需要按照下面幾節中的步驟安裝和配置運行時(shí)環(huán)境和開(kāi)發(fā)環(huán)境。然后,我們并不按慣例提供 Hello World 應用程序,而是分析一個(gè)比較復雜的銀行場(chǎng)景。這個(gè)場(chǎng)景在一個(gè)虛構的銀行環(huán)境中解釋前面提到的所有技術(shù)的使用方法,其中涉及銀行的后端數據庫、基于瀏覽器的銀行客戶(hù)門(mén)戶(hù)以及一個(gè)真實(shí)的第三方金融 Web 服務(wù)。 為了開(kāi)發(fā)和部署跨越所有三個(gè)應用程序層的銀行場(chǎng)景,需要為這些層中的以下組件選擇軟件:
有許多開(kāi)放源碼軟件可以滿(mǎn)足各個(gè)層的需要,本系列中的場(chǎng)景選用以下軟件: Web 瀏覽器:Mozilla Firefox 2.0.0.4 或更高版本。Firefox 具有許多優(yōu)點(diǎn),包括可用性、在線(xiàn)安全性以及能夠通過(guò)眾多的擴展應用程序進(jìn)行定制。還要使用 Firebug,這是 Firefox 的一個(gè)瀏覽器應用程序調試器擴展。 數據庫服務(wù)器:MySQL 5.0.41 或更高版本。MySQL 采用客戶(hù)機/服務(wù)器模式和嵌入模式。它完全是用 C 和 C++ 編寫(xiě)的。它有兩種版本:Enterprise 服務(wù)器和 Community 服務(wù)器。Community 服務(wù)器是免費的,而且足以滿(mǎn)足本文中的銀行場(chǎng)景的需要。 Web 服務(wù)器:Apache Web server 2.2.2。Apache 允許進(jìn)行靈活的配置,并可以用第三方模塊進(jìn)行擴展。 中間層服務(wù)器:Zend Core 2.0.1 或更高版本。這種免費的開(kāi)放源碼服務(wù)器支持 PHP 5。它得到強有力的社區支持。它包含 Apache Web 服務(wù)器,并支持 MySQL、IBM DB2? 和 Oracle 等數據庫。Zend Core for IBM 專(zhuān)門(mén)針對 IBM DB2 進(jìn)行過(guò)調優(yōu)。圖 1 給出 Zend Core 的概況。 中間層 IDE(Integrated Development Environment):Eclipse PDT 0.7 RC3 或更高版本。PDT 是針對 Eclipse 平臺的 PHP Development Tools 框架,其中包含開(kāi)發(fā) PHP 應用程序所需的所有開(kāi)發(fā)組件。在這個(gè) IDE 中還支持 PHP 調試。Zend、IBM 和其他公司將它捐獻給開(kāi)放源碼運動(dòng)。在編寫(xiě)本文時(shí),它剛剛出現,而且正好適合開(kāi)發(fā)我們銀行場(chǎng)景的中間層邏輯。 客戶(hù)端 IDE:Aptana Web IDE 0.2.8.14433 或更高版本。這是一個(gè)免費的開(kāi)放源碼的跨平臺的以 JavaScript 為中心的開(kāi)發(fā)環(huán)境,可以用來(lái)開(kāi)發(fā) Ajax 瀏覽器應用程序。它為 JavaScript、HTML 和 CSS 提供編碼支持。它支持 JavaScript 調試,并內置了對幾種 Ajax 框架的支持。除此之外,它還是基于 Eclipse 的。 按照下面幾節中的步驟安裝和設置這些開(kāi)放源碼軟件包,從而建立開(kāi)發(fā)和部署端到端 Ajax 應用程序的環(huán)境。(注意:本文中的所有安裝和開(kāi)發(fā)說(shuō)明都針對 Microsoft? Windows? 操作系統。) 圖 1. Zend Core 概況 ![]() 按照以下步驟安裝 Mozilla Firefox:
執行以下步驟來(lái)安裝 MySQL 數據庫服務(wù)器:
安裝 Apache Web 服務(wù)器和 Zend Core PHP 服務(wù)器 Zend Technologies Ltd. 免費提供 Zend Core。它包含 Apache Web 服務(wù)器。執行以下步驟來(lái)安裝 Apache Web 服務(wù)器和 Zend Core PHP 服務(wù)器。 為了免費下載 Zend Core,必須在 Zend Web 站點(diǎn)上注冊。如果還沒(méi)有注冊,那么訪(fǎng)問(wèn) 參考資料 中的 Zend Core URL 并注冊。
圖 2. Zend Core 配置屏幕 ![]() 安裝 Eclipse 的 PHP Development Tool(PDT) 到編寫(xiě)本文時(shí),PDT 只是候選插件,還不是完整發(fā)布的 Eclipse 平臺插件。執行以下步驟來(lái)安裝和配置 Eclipse PDT。(從 Eclipse 和 Zend Web 站點(diǎn)都可以獲得 PDT。Zend Web 站點(diǎn)提供的版本與 Eclipse Web 站點(diǎn)相同,但是增加了 Zend 的 PHP 調試工具。)
清單 1. php.ini 文件的內容
圖 3. Eclipse PDT 配置 ![]() 安裝 Aptana Web IDE 只需在前面安裝的 Eclipse PDT 中添加一個(gè)插件。在編寫(xiě)本文時(shí),Aptana Web IDE 的版本是 0.2.8.14433。執行以下步驟來(lái)安裝 Ajax 開(kāi)發(fā)所需的 Aptana Web IDE 的最新版本:
如果到目前為止所有操作都正常,就已經(jīng)設置了完整的 Eclipse IDE,可以使用它開(kāi)發(fā)、測試和調試銀行場(chǎng)景應用程序的工件,比如 XHTML、JavaScript、XHR、PHP 和 MySQL 代碼。還可以配置 Eclipse IDE 來(lái)使用 Zend Core PHP 服務(wù)器。Eclipse 和 Zend Core 的高效組合能夠滿(mǎn)足所有 Ajax 開(kāi)發(fā)和部署需求?,F在,我們來(lái)考慮一個(gè)比較復雜的場(chǎng)景,我們將在這個(gè)強大的環(huán)境中開(kāi)發(fā)和部署這個(gè)場(chǎng)景。 圖 4 描述一個(gè)比較復雜的場(chǎng)景,它在一個(gè) Ajax-PHP 環(huán)境中提供與銀行相關(guān)的某些功能。這個(gè)場(chǎng)景介紹一些技術(shù)組件,并按照傳統的體系結構劃分成以下三層:
在客戶(hù)端,這個(gè)場(chǎng)景使用基于瀏覽器的控件,這些控件是通過(guò)單頁(yè)面 XHTML 用戶(hù)界面元素以及 XHR 和 JSON 啟用的。在中間層,它使用 PHP 技術(shù),比如 SimpleXML、Services_JSON、HTTP 請求處理程序和 PHP SOAP 客戶(hù)機。在數據層,它使用 SQL 和 ODBC。 還可以根據應用的技術(shù)組件劃分這個(gè)場(chǎng)景:
可以看到,這個(gè)場(chǎng)景滿(mǎn)足 Ajax 環(huán)境的基本因素和重要因素。在眾多的技術(shù)解決方案中,將選擇一種特殊的實(shí)現方式,從而幫助您從這個(gè)場(chǎng)景獲得盡可能多的收獲??偟脑O計目標是不要讓場(chǎng)景復雜化,所以在客戶(hù)端上不提供不必要的浮華的屏幕。我希望讓您更輕松地理解在 Eclipse IDE(PDT 和 Aptana)和 Zend Core 中開(kāi)發(fā)和部署各種場(chǎng)景工件所涉及的細節。另外,這個(gè)場(chǎng)景還從 PHP Web 服務(wù)客戶(hù)機訪(fǎng)問(wèn)互聯(lián)網(wǎng)上駐留的一個(gè)基于 .NET 的真實(shí)的 Web 服務(wù),以此演示互操作性。正如前面指出的,為了將注意力放在所選的開(kāi)放源碼軟件的核心功能上,這個(gè)場(chǎng)景沒(méi)有考慮安全性、可伸縮性和可用性特性 —— 您應該通過(guò)其他資料學(xué)習這些特性。 圖 4. 銀行場(chǎng)景 ![]() 在閱讀下面幾節時(shí),請參考 圖 4 來(lái)理解場(chǎng)景的細節。這個(gè)場(chǎng)景主要在 Ajax 和 PHP 環(huán)境中實(shí)現幾個(gè)常用的銀行出納功能。本節描述組成這個(gè)場(chǎng)景的各個(gè)模塊。 銀行的客戶(hù)信息保存在一個(gè)數據庫表中。我將在 MySQL 數據庫中創(chuàng )建這個(gè)表。它是一個(gè)緊湊但強大的社區版服務(wù)器。對于本系列的場(chǎng)景,所有客戶(hù)數據將同時(shí)填充進(jìn)數據庫表中。在此之后,可以通過(guò) Zend Core 提供的 ODBC 驅動(dòng)程序獲取和更新存儲的客戶(hù)數據。數據庫訪(fǎng)問(wèn)的類(lèi)型(比如讀或寫(xiě))將根據銀行出納功能的性質(zhì)決定。 現在,考慮提供銀行出納功能所需的核心銀行邏輯。在這個(gè)場(chǎng)景中,需要支持下面的銀行出納功能:
因為這四個(gè)功能都需要訪(fǎng)問(wèn)數據庫,所以創(chuàng )建一個(gè) PHP 文件來(lái)提供必需的數據庫功能。它將數據庫功能與其他中間層邏輯隔離開(kāi)。通過(guò)以這種方式提供核心的銀行出納功能,就可以向這些功能的所有調用者提供以一致的方式包裝的數據庫結果。一個(gè) PHP 關(guān)聯(lián)數組用來(lái)傳遞核心銀行邏輯的結果。 Bank Portal 用戶(hù)界面(Ajax)—— 視圖 現在,考慮為銀行出納員提供執行四個(gè)核心功能的用戶(hù)界面??梢酝ㄟ^(guò)胖客戶(hù)端或瘦客戶(hù)端訪(fǎng)問(wèn) PHP 代碼中封裝的核心銀行邏輯。這個(gè)場(chǎng)景為銀行出納員開(kāi)發(fā)一個(gè)單頁(yè)面的 Ajax 瀏覽器用戶(hù)界面。 在中間層上使用 PHP 時(shí),一種常見(jiàn)的做法是用 PHP 代碼輸出必需的 XHTML、CSS 和 JavaScript。在這個(gè)場(chǎng)景中,我們完全不用 PHP 代碼輸出任何客戶(hù)機用戶(hù)界面代碼。這意味著(zhù)與 Bank Portal 相關(guān)聯(lián)的所有代碼都只在客戶(hù)機啟動(dòng)時(shí)提供。我們將用 XHTML 和 CSS 編寫(xiě)所有用戶(hù)界面元素,用 JavaScript 編寫(xiě)客戶(hù)端邏輯。這些工件(XHTML、CSS 和 JavaScript)共同產(chǎn)生所有用戶(hù)界面元素,可以滿(mǎn)足銀行場(chǎng)景中 Bank Portal 的需求。這意味著(zhù),Apache Web 服務(wù)器只需要向瀏覽器傳遞一次客戶(hù)機用戶(hù)界面內容。這個(gè)一次性的代碼傳遞過(guò)程發(fā)生在銀行出納員訪(fǎng)問(wèn)這個(gè)應用程序的 URL 時(shí)。在此之后,Bank Portal 客戶(hù)機只會(huì )為了交換數據而與服務(wù)器進(jìn)行通信,而不是為了獲取 XHTML、CSS 和 JavaScript 等表示內容。 這就擯棄了傳統的單擊并等待 范例;在傳統范例中,對于每次用戶(hù)操作,瀏覽器都會(huì )與中間層服務(wù)器進(jìn)行通信來(lái)下載表示內容。單頁(yè)面 Ajax 應用程序的杰出特性之一是,在啟動(dòng)時(shí)下載一次表示內容,之后就不需要再從服務(wù)器獲取頁(yè)面。在啟動(dòng)之后,單頁(yè)面 Ajax 客戶(hù)機應用程序與中間層服務(wù)器邏輯進(jìn)行通信,只是為了進(jìn)行應用程序特有的數據交換。因此,中間層邏輯會(huì )更緊湊,它只關(guān)注業(yè)務(wù)邏輯,而不需要承擔向瀏覽器傳遞表示內容的責任。這種方式可以更好地隔離應用程序層,產(chǎn)生干凈優(yōu)雅的 Web 應用程序設計。 討論了瀏覽器用戶(hù)界面之后,就應該考慮如何通過(guò)網(wǎng)絡(luò )執行銀行出納員選擇的銀行操作。在這個(gè)場(chǎng)景中,將出納員選擇的 Bank Action 命令和所需的輸入數據發(fā)送給一個(gè) PHP 代碼模塊,這個(gè)模塊作為瀏覽器和(前一節描述的)PHP 模塊中的核心銀行邏輯之間的代理/中間人。Bank Actions PHP 模塊支持以 REST 風(fēng)格調用中間層中的服務(wù)功能。Bank Actions PHP 模塊接收 Bank teller Action 命令并對 Bank Logic PHP 模塊進(jìn)行調用來(lái)獲得所需的結果。調用適當的銀行邏輯來(lái)訪(fǎng)問(wèn)數據庫并獲得結果。Bank Logic 模塊返回之后,Bank Actions 模塊將結果以 JSON 格式傳遞給瀏覽器??傊?,Bank Actions PHP 模塊是銀行出納員請求的調度器,它調用適當的 Bank Logic 功能來(lái)處理這些請求。 XML Web 服務(wù)客戶(hù)機(從 PHP 對 .NET 服務(wù)進(jìn)行 SOAP 訪(fǎng)問(wèn))—— Helper 除了作為代理/中間人之外,Bank Actions PHP 模塊還作為一個(gè) PHP Web 服務(wù) SOAP 客戶(hù)機,它可以獲得特定客戶(hù)的投資組合中當前股票的價(jià)值。這可以幫助您學(xué)習如何用 PHP 生成 Web 服務(wù)客戶(hù)機。在這個(gè)場(chǎng)景中,Bank Actions PHP 模塊對一個(gè)在互聯(lián)網(wǎng)上運行的真實(shí)的遠程 Web 服務(wù)進(jìn)行 SOAP XML Web 服務(wù)調用。這個(gè) Web 服務(wù)是一個(gè)基于 .NET 的 Web 服務(wù),這可以讓您體會(huì )一下 PHP 的互操作特性。您還會(huì )學(xué)到使用 PHP SimpleXML API 進(jìn)行 XML 解析的知識。 現在,您應該對這個(gè)場(chǎng)景的高層設計目標有了清晰的認識。這一概述應該足以幫助您開(kāi)發(fā)、測試、集成和部署銀行場(chǎng)景中的核心模塊。 在這個(gè)文章系列的第 2 部分和第 3 部分中,將執行以下任務(wù)來(lái)完成這個(gè)場(chǎng)景,使它達到可運行的狀態(tài),并講解在 Eclipse IDE 中開(kāi)發(fā)它以及在 Zend Core 中部署它的底層技術(shù):
簡(jiǎn)單和低成本促使革命性的 Web 平臺在世界各地的廣大用戶(hù)中流行起來(lái)了。尤其是,開(kāi)放源碼的 Eclipse 工具和 Zend Core 一起提供了很大的功能,使各個(gè)組織開(kāi)始考慮從 .NET 環(huán)境這樣的專(zhuān)有平臺遷移到開(kāi)放源碼平臺。對于這些客戶(hù),這些軟件提供了一個(gè)出色的零成本的開(kāi)發(fā)和部署環(huán)境,并且可以與現有的專(zhuān)有基礎設施共存。在本系列的第 2 部分中,您將體會(huì )真實(shí)而有趣的 Ajax-PHP 開(kāi)發(fā)。在學(xué)習第 2 部分之前,請盡量熟悉 Eclipse PDT、Aptana 插件和 Zend Core 運行時(shí)的特性。 學(xué)習
獲得產(chǎn)品和技術(shù)
| ||||||||||
聯(lián)系客服