开发端到端的 Ajax 应用程序,第 1 部分: 用一个场景设置 Ajax 环境
隔离应用程序层来产生干净优雅的 Web 应用程序
![]() | ![]() |
![]() |
级别: 中级
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 编程技术相匹配的其他技术包括同样令人印象深刻的基于 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 浏览器: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 概况 ![]()
按照以下步骤安装 Mozilla Firefox:
执行以下步骤来安装 MySQL 数据库服务器:
Zend Technologies Ltd. 免费提供 Zend Core。它包含 Apache Web 服务器。执行以下步骤来安装 Apache Web 服务器和 Zend Core PHP 服务器。
为了免费下载 Zend Core,必须在 Zend Web 站点上注册。如果还没有注册,那么访问
参考资料 中的 Zend Core URL 并注册。
图 2. Zend Core 配置屏幕 ![]() 到 编写本文时,PDT 只是候选插件,还不是完整发布的 Eclipse 平台插件。执行以下步骤来安装和配置 Eclipse PDT。(从 Eclipse 和 Zend Web 站点都可以获得 PDT。Zend Web 站点提供的版本与 Eclipse Web 站点相同,但是增加了 Zend 的 PHP 调试工具。)
清单 1. php.ini 文件的内容
图 3. Eclipse PDT 配置 ![]()
安装 Aptana Web IDE 只需在前面安装的 Eclipse PDT 中添加一个插件。在编写本文时,Aptana Web IDE 的版本是 0.2.8.14433。执行以下步骤来安装 Ajax 开发所需的 Aptana Web IDE 的最新版本:
如 果到目前为止所有操作都正常,就已经设置了完整的 Eclipse IDE,可以使用它开发、测试和调试银行场景应用程序的工件,比如 XHTML、JavaScript、XHR、PHP 和 MySQL 代码。还可以配置 Eclipse IDE 来使用 Zend Core PHP 服务器。Eclipse 和 Zend Core 的高效组合能够满足所有 Ajax 开发和部署需求。现在,我们来考虑一个比较复杂的场景,我们将在这个强大的环境中开发和部署这个场景。 图 4 描述一个比较复杂的场景,它在一个 Ajax-PHP 环境中提供与银行相关的某些功能。这个场景介绍一些技术组件,并按照传统的体系结构划分成以下三层:
在 客户端,这个场景使用基于浏览器的控件,这些控件是通过单页面 XHTML 用户界面元素以及 XHR 和 JSON 启用的。在中间层,它使用 PHP 技术,比如 SimpleXML、Services_JSON、HTTP 请求处理程序和 PHP SOAP 客户机。在数据层,它使用 SQL 和 ODBC。
还可以根据应用的技术组件划分这个场景:
可 以看到,这个场景满足 Ajax 环境的基本因素和重要因素。在众多的技术解决方案中,将选择一种特殊的实现方式,从而帮助您从这个场景获得尽可能多的收获。总的设计目标是不要让场景复杂 化,所以在客户端上不提供不必要的浮华的屏幕。我希望让您更轻松地理解在 Eclipse IDE(PDT 和 Aptana)和 Zend Core 中开发和部署各种场景工件所涉及的细节。另外,这个场景还从 PHP Web 服务客户机访问互联网上驻留的一个基于 .NET 的真实的 Web 服务,以此演示互操作性。正如前面指出的,为了将注意力放在所选的开放源码软件的核心功能上,这个场景没有考虑安全性、可伸缩性和可用性特性 —— 您应该通过其他资料学习这些特性。 图 4. 银行场景 ![]()
在阅读下面几节时,请参考
图 4 来理解场景的细节。这个场景主要在 Ajax 和 PHP 环境中实现几个常用的银行出纳功能。本节描述组成这个场景的各个模块。
银 行的客户信息保存在一个数据库表中。我将在 MySQL 数据库中创建这个表。它是一个紧凑但强大的社区版服务器。对于本系列的场景,所有客户数据将同时填充进数据库表中。在此之后,可以通过 Zend Core 提供的 ODBC 驱动程序获取和更新存储的客户数据。数据库访问的类型(比如读或写)将根据银行出纳功能的性质决定。
现在,考虑提供银行出纳功能所需的核心银行逻辑。在这个场景中,需要支持下面的银行出纳功能:
因 为这四个功能都需要访问数据库,所以创建一个 PHP 文件来提供必需的数据库功能。它将数据库功能与其他中间层逻辑隔离开。通过以这种方式提供核心的银行出纳功能,就可以向这些功能的所有调用者提供以一致的 方式包装的数据库结果。一个 PHP 关联数组用来传递核心银行逻辑的结果。
现在,考虑为银行出纳员提供执行四个核心功能的用户界面。可以通过胖客户端或瘦客户端访问 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 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 功能来处理这些请求。 除 了作为代理/中间人之外,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 中部署它的底层技术:
简 单和低成本促使革命性的 Web 平台在世界各地的广大用户中流行起来了。尤其是,开放源码的 Eclipse 工具和 Zend Core 一起提供了很大的功能,使各个组织开始考虑从 .NET 环境这样的专有平台迁移到开放源码平台。对于这些客户,这些软件提供了一个出色的零成本的开发和部署环境,并且可以与现有的专有基础设施共存。在本系列的 第 2 部分中,您将体会真实而有趣的 Ajax-PHP 开发。在学习第 2 部分之前,请尽量熟悉 Eclipse PDT、Aptana 插件和 Zend Core 运行时的特性。 学习
获得产品和技术
|
转自: http://www.ibm.com/developerworks/cn/web/wa-aj-end2end1/