转载--开发端到端的 Ajax 应用程序,第 1 部分: 用一个场景设置 Ajax 环境

转载 2007年09月16日 10:54:00
开发端到端的 Ajax 应用程序,第 1 部分: 用一个场景设置 Ajax 环境
隔离应用程序层来产生干净优雅的 Web 应用程序
developerWorks
文档选项
将此页作为电子邮件发送


级别: 中级
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)为开发和部署 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 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何关于 Ajax 的新信息都能在这里找到。

与 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 浏览器
  • 数据库服务器
  • Web 服务器
  • 中间层服务器
  • 用于中间层代码开发的 IDE
  • 用于客户端代码开发的 IDE
有许多开放源码软件可以满足各个层的需要,本系列中的场景选用以下软件:

Web 浏览器: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 和其他公司将它捐献给开放源码运动。在编写本文时,它刚刚出现,而且正好适合开发我们银行场景的中间层逻辑。

客户端 IDE:Aptana Web IDE 0.2.8.14433 或更高版本。这是一个免费的开放源码的跨平台的以 JavaScript 为中心的开发环境,可以用来开发 Ajax 浏览器应用程序。它为 JavaScript、HTML 和 CSS 提供编码支持。它支持 JavaScript 调试,并内置了对几种 Ajax 框架的支持。除此之外,它还是基于 Eclipse 的。

按照下面几节中的步骤安装和设置这些开放源码软件包,从而建立开发和部署端到端 Ajax 应用程序的环境。(注意:本文中的所有安装和开发说明都针对 Microsoft® Windows® 操作系统。)

图 1. Zend Core 概况
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 InspectorQuality Feedback Agent 选项,并单击 Next
    5. 接受默认的安装文件夹并单击 Next
    6. 确保不选择前两个选项(On my DesktopIn 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 NetworkingEnable Strict Mode 选项并单击 Next
    13. 选择 Standard Character Set 并单击 Next
    14. 确保选择 Install As Windows ServiceInclude 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 配置屏幕
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 配置
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 运行时的特性。



参考资料
学习

获得产品和技术


关于作者
Photo of Senthil Nathan

Senthil Nathan 是位于纽约 Hawthorne 的 IBM T.J. Watson Research Center 的一位高级软件工程师。在为不同类型的企业应用程序构建软件方面,他有 22 年经验。他当前感兴趣的领域包括 SOA、Web 服务、Java 2 Platform, Enterprise Edition(J2EE)、PHP、Ruby On Rails、Web 2.0 和 Ajax 开发。

 
转自:http://www.ibm.com/developerworks/cn/web/wa-aj-end2end1/

IOS开发学习(1)-IOS应用程序周期

IOS应用程序周期

如何使用ajax开发web应用程序 [1]

作者: Jonathan Fenocchi 时间:2005.10.25 译者:Sheneyan 英文原文: http://webreference.com/programming/javascrip...

使用 Ajax 技术构建 Web 演示应用程序,第 2 部分: 创建可编辑的 Web 演示

简介 在我们的上一篇文章 “使用 Ajax 技术构建一个 Web 演示应用程序,第 1 部分:开发 Web UI” 中,我们展示了如何在 Web 上构建一个演示 UI。但是,我们只是创建了一个演示界...

AJAX 应用程序体系结构(第1部分)

====================================================== 注:本文源代码点此下载 =============================...

掌握 Ajax,第 6 部分: 建立基于 DOM 的 Web 应用程序

掌握 Ajax,第 6 部分: 建立基于 DOM 的 Web 应用程序 在不刷新页面的情况下使用 DOM 改变网页界面 文档...

联合使用 CSS、JavaScript 和 JSF 精心打造 Ajax 应用程序,第 2 部分: 动态 JSF 表单

原文地址: http://www.ibm.com/developerworks/cn/web/wa-aj-jsfcss2/ 处理事件和更新用户界面 很多 JSF HTML 组件都拥有 Java...

合使用 CSS、JavaScript 和 JSF 精心打造 Ajax 应用程序,第 2 部分: 动态 JSF 表单

合使用 CSS、JavaScript 和 JSF 精心打造 Ajax 应用程序,第 2 部分: 动态 JSF 表单 探索标准 JSF 组件中的 CSS 支持 Andrei Cioroian...

掌握 Ajax,第 6 部分: 建立基于 DOM 的 Web 应用程序

本系列的上一篇文章中考察了文档对象模型(DOM)编程中涉及到的概念——Web 浏览器如何把网页看作一棵树,现在您应该理解了 DOM 中使用的编程结构。本期教程将把这些知识用于实践,建立一个简单的包含一...

Ajax 入门1:如何用Ajax建立一个简单的web应用程序(html + javascript + php)

最近对 Ajax 产生了兴趣,花了
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:转载--开发端到端的 Ajax 应用程序,第 1 部分: 用一个场景设置 Ajax 环境
举报原因:
原因补充:

(最多只允许输入30个字)