开发端到端的 Ajax 应用程序,第 3 部分: 集成、测试和调试应用程序隔离应用程序层以产生干净优雅的 Web 应用程序 ![]() |
![]() |
![]() |
级别: 中级 Senthil Nathan (sen@us.ibm.com), 高级软件工程师, IBM 2007 年 8 月 13 日 Ajax(Asynchronous JavaScript + XML)正在迅速地成为时髦的技术,它可以为在浏览器中运行的 Web 应用程序提供具有桌面质量的软件特性。这个分三部分的系列讨论如何使用开放源码技术开发端到端 Ajax 应用程序,本文是这个系列的最后一篇文章。 在 本系列的前两部分 中,设置了一个开发环境,它由 LAMP 风格的运行时和 Eclipse IDE 组成。定义了一个虚构的银行场景以演示重要的 Ajax 概念。然后,完成了场景的一部分,包括创建数据库、中间层 PHP 逻辑和一个简单 XHTML 以提供一个单页面浏览器 GUI,还提供了 CSS 样式代码和几个 XML HTTP Request(XHR)实用程序函数。在本系列的第三篇(也就是最后一篇)中,我们要用 JavaScript 实现 Ajax 客户端逻辑,从而完成这个场景的其余部分。还要用 PHP 构建一个 Representational State Transfer(REST)请求分配器以完成客户的银行任务,比如存款、取款和股票组合价值查询。还要用 PHP 开发一个 SOAP(Simple Object Access Protocol)Web 服务客户机,用它访问一个真实的第三方(免费)Web 服务。您将看到如何把本系列中开发的所有组件(XHTML、CSS、JavaScript、PHP、Web 服务客户机和 MySQL)集成起来。最后,本文解释用 LAMP 风格的运行时部署、测试和调试场景的基本方法。到那时,我们就完成了一个比较复杂的端到端场景示例,它演示了 Ajax 客户机、Apache-PHP-MySQL 运行时和相关的 Eclipse IDE 的强大特性。
简介 在开始学习本文之前,要确保(本系列 第 2 部分 中开发的)Bank 场景工件 Bank DB、Bank Logic 和 Bank Portal 在 Eclipse IDE 中保持原样。这些工件包括创建和填充数据库的 SQL 脚本;提供数据库访问的 PHP 代码;以及单页面浏览器应用程序所需的 XHTML、CSS 和 XHR。用这些工件编写的代码只提供了 图 1 所示的银行场景的一部分功能。还缺少将这些已经开发的工件组合起来的组件。如果预览 XHTML 文件,就会看到它在一个浏览器窗口中显示应用程序特有的各个 UI 屏幕。仍然需要编写适当的客户端 JavaScript 逻辑以集成这些 UI 屏幕,产生单页面浏览器应用程序的效果。在客户端代码中,还需要添加适当的 XHR 异步通信逻辑。如果没有客户端 JavaScript 代码,就无法执行银行出纳员功能。 图 1. 银行场景
您可能会注意到,提供特定银行出纳员功能的所有 HTML 表单都将用户数据发送给一个基于 REST 的中间层服务。我们将在另一个 PHP 模块中实现这个服务,这个模块接受银行出纳员的浏览请求,包括存款、取款和当前股票组合价值查询。这个 PHP 模块作为银行操作的请求分配器,它解析银行出纳员的请求并调用适当的 Bank Logic 函数以处理这个请求。您会看到用 PHP 编写这样的 REST 服务是多么容易。 在开发用于 REST 请求分派的 PHP 服务之后,我们的重点将转到一个可以通过互联网访问的基于 .NET 的 Web 服务。这个免费的 Web 服务提供给定股票的当前价格。我们将在 PHP 中间层中开发一个 Web 服务客户机,这样就可以从基于 PHP 的银行操作请求分配器远程调用这个 Web 服务,从而获得股票的报价。然后,银行操作请求分配器将用当前股票价格调用 Bank Logic PHP 模块,计算出给定帐户持有人的当前股票组合价值。您将学习使用 SOAP 访问 Web 服务的技术,还要学习 XML 和 JavaScript Object Notation(JSON)这两种流行的数据交换格式。 用 JavaScript 编写的客户端逻辑 在这个单页面浏览器应用程序中,需要通过客户端逻辑处理 Ajax 风格的用户界面并与中间层服务进行数据交换。正如本系列 第 2 部分 所述,可以使用当前的许多 Ajax 框架和库之一进行开发。但是,由于我们只关注很少的几种 Ajax 特性,所以将用 JavaScript 编写客户端逻辑。这样做有助于我们将注意力集中在本文的 Ajax 相关目标上:
一旦理解了这个银行场景中的 JavaScript 代码,您就可以尝试使用某个 Ajax 框架实现相同的客户端逻辑。无论采用哪种方式,基于 Eclipse 的 Aptana Web IDE 都是进行客户端代码开发的理想环境。 众所周知,JavaScript 提供了强大的语言特性。在浏览器环境中,JavaScript 提供了事件处理方法,可以捕捉用户操作和系统活动(比如计时器和网络事件)。在我们的银行场景中,将使用事件处理方法处理鼠标操作(mouseover、mouseout、mouseclick 等等),并使用 XML HTTP Request(XHR)对象处理服务器响应异步回调。 单页面浏览器应用程序只需在浏览器中输入应用程序 URL 时,从服务器下载一次所有与用户界面相关的代码工件(XHTML、CSS 和 JavaScript)。这意味着,客户端逻辑应该获得处理银行场景的客户端需求所需的所有东西。屏幕布局和相关联的样式是通过 XHTML 和 CSS 文件提供的。其他客户端逻辑由 JavaScript 代码提供。逻辑的主要部分涉及到分割不同的应用程序屏幕,并根据用户导航显示适当的一个屏幕。本系列的 第 2 部分 讲解了如何使用 、 和 HTML 元素安排不同的屏幕,从而为整个 Web 应用程序创建单一 XHTML 页面。通过使用 JavaScript,您将学习如何操作浏览器 DOM 以隐藏和显示 元素中的用户界面控件。另外,还要学习如何动态地分配 CSS 规则,从而控制用户界面控件的样式。每当这个应用程序的用户(常常是银行出纳员)执行帐户相关任务(比如存款、取款或股票组合价值更新)时,客户端 JavaScript 逻辑会以 REST 方式与中间层 PHP 服务进行通信。在这种交互中,在浏览器客户机和中间层 PHP 服务之间交换应用程序特有的数据。这些操作都使用 XHR 对象完成(参见本系列 第 2 部分 中的说明)。JavaScript 客户端逻辑使用 XHR 对象与服务器交换应用程序特有的数据。您将学习以异步模式接收服务器响应的 Ajax 方式。 在 Ajax 的组成部分(异步、JavaScript 和 XML)中,我们已经讨论了异步 和 JavaScript。现在,要讨论 Ajax 开发的另一个重要组成部分:数据表示。尽管 Ajax 这个缩写词暗示以 XML 作为数据表示格式,但是 XML 不是 Web 应用程序可用的惟一数据交换机制。因为 XML 是软件开发社区所熟悉的格式,所以本文不需要重复介绍 XML 的知识,而是介绍另一种流行的 Web 数据交换格式 JSON。与 XML 相似,JSON 也是基于文本的,是人和机器都可读的。从机器可读性的角度来看,JSON 似乎更容易解析和使用 —— 尤其是在浏览器应用程序中 —— 因为它采用 JavaScript 对象和数组数据结构的语法。在浏览器应用程序中使用 JSON,就可以将整个数据结构作为第一类 JavaScript 对象对待。这对于许多 Web 开发人员是个好消息,因为这完全避免了额外的解析工作。JSON 格式还可以在其他流行的编程语言中使用,比如 Java 语言、PHP、Ruby 和 C++ 等等。下一节详细讲解 JSON 的组成部分。还可以从 参考资料 一节找到完整的 JSON 信息的链接。还有一些工具可以将现有的 XML 数据转换为 JSON 格式。可以通过 参考资料 中引用的另一篇 IBM® developerWorks 文章了解这种技术。我们的银行场景的客户端逻辑使用 JSON 作为浏览器和中间层 PHP 服务之间的数据交换格式。在后面几节中,学习如何在 JavaScript 和 PHP 中处理 JSON。 JSON 的结构 JSON 由两种结构组成:
这些是通用的数据结构。
了解了这些基本组件,再加上从本系列的 第 1 部分 和 第 2 部分 获得的知识和经验,您现在应该能够理解 Ajax 开发的概念。尽管组成 Ajax 的许多技术已经存在很长时间了,但是以 Ajax 方式组合使用这些技术来开发应用程序还是一个新现象。这种技术组合方式使得以端到端方式调试 Web 应用程序变得非常重要。在本文后面,您将在银行场景的上下文中学习调试方法。 用 JavaScript 实现客户端逻辑 正如前一节中指出的,JSON 是这个银行场景选用的数据交换格式。可以通过 JavaScript 首先,用 JavaScript 创建客户端逻辑:
对客户端逻辑的说明 BankTeller.js 文件中的客户端逻辑覆盖了重要的 Ajax 概念,涉及创建单页面浏览器应用程序、以异步方式与中间层服务进行通信以及使用 REST/JSON 进行服务访问和数据交换。这些工作主要通过处理用户交互的 JavaScript 事件处理方法和 XHR 对象来完成。这个文件中的函数还需要另外两个 JavaScript 文件(xhr.js 和 json.js)中的其他实用程序函数。这个文件中的代码首先定义这个应用程序特有的变量和常量。然后是 JavaScript 函数(其次序无所谓)。以下 10 个函数与银行出纳员应用程序的用户交互相关:
以下 9 个函数用于与中间层服务交换应用程序特有的数据:
这个文件中的注释很充分,足以帮助您理解这个 Ajax 浏览器应用程序的内部工作原理。下面从较高层面解释一些客户端 JavaScript 函数的作用。可以通过 BankTeller.js 文件中的注释了解更多细节。当用户的浏览器指向这个应用程序的 URL 时,只从服务器获取这个应用程序的一个 XHTML 页面,并装载到浏览器中。在装载最初的页面时,运行 initOnPageLoad 函数。正如前面提到的,这个应用程序的用户界面只包含一个 XHTML 页面,这个页面用 HTML 元素分割为不同的部分。有一个称为 “mainPage” 的主 元素,它处于浏览器 DOM 树结构的顶层。其他所有 元素都是主 元素的子元素。在这个函数中,将这个应用程序中的所有 元素存储在全局变量中。对于除了主页面和出纳员菜单项之外的所有 元素,都应用一个 CSS 规则以隐藏它们。因为这些 元素已经存储在全局变量中,所以还从父 元素中删除隐藏的 元素,以避免浏览器中出现垂直滚动条。然后发出一个 Ajax XHR 调用,以异步方式获得所有银行帐户信息。
部分中可选地显示或隐藏页脚。页脚显示当前的出纳员姓名和一个返回主菜单的选项。它使用 “visible” 或 “hidden” 等 CSS 内置样式显示或隐藏页脚。 这个应用程序使用一个菜单选择要执行的银行出纳员选项。应用程序的主屏幕上显示这个菜单。这个菜单结构是用常规的 HTML 代码编写的,嵌入在 XHTML 文件中的 元素中。我们给这些 元素设置了 mouseover、mouseout 和 onclick 鼠标事件处理函数。当发生 mouseover 和 mouseout 事件时,调用对应的事件处理函数(changeOptionsLinkStyleForSelection 和 changeOptionsLinkStyleToDefault)。在这些函数中,用一个 CSS 类规则切换这些 元素的样式,分别设置背景颜色和取消背景颜色。这样就实现了突出显示菜单项的效果。
元素,并显示与所选的银行出纳员选项对应的另一个 元素。在新显示的屏幕(存款、取款或股票组合价值)上,列出了所有帐户持有人的姓名。出纳员可以从这个列表中选择一个帐户持有人,并执行所需的银行出纳员操作。
现在,我们来看看与 XHR 相关的函数。因为我们的应用程序是一个真正的单页面 Ajax 应用程序,所以表示内容只在应用程序启动时下载一次。在此之后,浏览器客户机对服务器的访问仅仅是为了交换应用程序特有的数据。通过以 REST(Representational State Transfer)风格访问中间层服务,使用一个 XHR 对象以异步方式执行数据交换。REST 使用 HTTP 动词,比如 PUT、GET、POST 和 DELETE,这指出如何通过数据交换访问远程服务器资源。(关于 REST 的更多信息参见 参考资料。) 在许多 Ajax 应用程序中,XHR 与 REST 访问机制配合得很好。正如前几节中提到的,这个应用程序使用 JSON 格式进行数据编码。在这个应用程序中,在浏览器和中间层服务之间有四种不同的数据交换。这四种数据交换涉及的过程是非常相似的。因此,这里只对银行出纳员存款操作的数据交换进行说明。每次数据交换通过两个不同的 JavaScript 函数完成:一个函数向中间层服务发送请求,另一个函数以异步方式接收服务器响应数据。当银行出纳员执行存款操作时,他输入存款数量并选择帐户持有人姓名,然后按 Deposit 按钮。这个按钮的 onclick 事件处理函数设置为 为了将 JSON 对象转换为 JSON 格式的字符串,要使用 json.js 文件(由 Douglas Crockford 开发)中的一个实用程序函数。然后,创建一个 HTTP POST 查询字符串,其中包含两个键 - 值对。第一个键 - 值对告诉中间层服务需要执行什么资源或命令 —— 在这个示例中,它是存款命令。第二个键 - 值对告诉中间层服务从浏览器传入的请求数据 —— 在这个示例中,它是由帐户持有人姓名和存款数量组成的 JSON 格式的数据。然后,指定中间层服务的 URL。在此之后,创建一个新的 XHR 对象;最重要的是,设置回调函数 现在看看这个回调函数。在每次 HTTP 状态转换时,都调用这个回调函数。但是,在这个回调函数中检查的 HTTP 状态只有 前面的段落对客户端 JavaScript 代码的内部逻辑做了高层面的说明。为了简洁,客户端逻辑没有处理真实环境中可能发生的许多运行时错误。请务必仔细查看 清单 1 并阅读其中的注释。 下面几节关注 Web 服务并完成银行场景实现的其余部分。 Web 服务体系结构模型 Web 服务 是一个描述一组操作的接口,可以用 XML 和 JSON 等标准化消息格式通过网络访问这些操作。Web 服务主要用于程序之间的交互。Web 服务使应用程序可以更快速、轻松而且成本低廉地集成起来。通常在协议栈的较高层,基于以业务服务语义为中心的消息进行集成。这样就可以在企业内外以通用的方式对业务功能进行松散的集成。 实现通用 Web 服务模型的关键是一组标准。比较重要的标准包括 HTTP、SOAP、REST、XML、JSON 和 WSDL(Web Services Description Language)。 图 2 描述了 Web 服务模型中涉及的重要角色和交互。Web 服务体系结构模型中涉及三个角色:
Web 服务体系结构模型中涉及三种交互:
图 2. Web 服务角色和交互 服务提供者(service provider) 是服务的所有者或平台。服务请求者(service requester) 或服务消费者(service consumer)是寻找并调用服务或者发起与服务的交互的应用程序。服务消费者角色可以是由人控制的浏览器应用程序,也可以是没有用户界面的程序(比如 PHP、Java、Ruby、servlet、EJB)。服务注册处(service registry) 是一个可搜索的服务描述目录,服务提供者将他们的服务描述发布到这里。服务消费者通过注册处寻找服务并获得服务的相关信息。 发布(Publish)交互让服务提供者能够发布服务描述,从而让服务消费者可以找到服务。寻找(Find)交互让服务消费者能够直接获得服务描述。绑定(Bind)交互让服务消费者能够使用服务描述中指定的绑定细节,在运行时调用服务或者发起与服务的交互。 Web 服务模型中的一个重要部分是服务描述。WSDL 是一种服务描述标准,它让服务提供者能够以机器和人都可读的格式描述他们的服务。图 3 显示 WSDL 文档的结构。WSDL 标准有两个部分:服务接口和服务实现。服务接口(service interface) 是一个抽象的或可重用的服务定义,可以由多个服务实现引用。服务实现(service implementation) 描述一个给定的服务提供者如何实现某个服务。 在 WSDL 服务接口中,类型定义服务消费者和服务提供者之间的交互所用的定制 XML 数据类型。消息指定在服务消费者和服务提供者之间传输的有效负载的各个部分的 XML 数据类型。操作指定在 Web 服务交互的输入和输出中可以出现哪些消息。端口类型定义允许的 Web 服务操作。最后,绑定描述协议和数据格式。 在 WSDL 服务实现中,端口元素将一个端点(网络地址位置或 URL)与服务接口中的一个绑定元素关联起来。服务元素包含端口元素的集合。 图 3. WSDL 的结构 实现 Web 服务客户机 银行出纳员操作之一是获得给定的帐户持有人的当前股票组合价值。当银行出纳员从 Web 页面上选择这个选项时,一个 HTTP 请求被发送到中间层 PHP 服务。在调用 Bank Logic PHP 模块计算股票组合的总价值之前,需要将当前股票价格作为参数发送给它。为了获得帐户持有人股票组合中一只股票的当前股票价格,需要访问互联网上的一个远程 Web 服务。 为了访问远程 Web 服务,必须使用 WSDL 生成一个 Web 服务客户机代理。在 PHP 中,只需几行代码就可以完成这个任务。通过使用 PHP SOAP Client 库,就可以从服务提供者提供的 WSDL 动态地生成 Web 服务客户机。在这个示例中,我们要使用 WebserviceX.net 在互联网上免费提供的一个基于 .NET 的股票报价服务。您应该访问 参考资料 一节中提供的 WebServiceX.net 链接,花点儿时间研究这个远程股票报价服务的 WSDL 文件。 按照以下步骤用 WebserviceX.net 上发布的股票报价服务 WSDL 文件在 PHP 中创建一个 Web 服务客户机:
清单 2. GetStockPrice.php 文件的内容
PHP Web 服务客户机中的逻辑 前一节中创建 Web 服务客户机的过程只是 PHP SOAP 客户机库支持的简单方式之一。GetStockPrice.php 中的逻辑让 Web 服务客户机访问 URL http://www.webserviceX.net 上的股票报价服务。PHP SOAP 客户机库直接指向服务提供者发布的 WSDL URL,并使用 WSDL 中的服务描述信息在内存中动态地创建一个内部服务代理。然后,代理代码进行远程调用;因此,对于客户机而言,股票报价功能就像是在本地一样。在这个示例中,客户机代理使用 SOAP 访问协议与远程股票报价服务进行交互,它发送一个股票代号作为输入,然后接收股票报价服务输出的一个 XML 文档。 GetStockPrice.php 中的逻辑很简单,它只包含一个函数: 远程股票报价服务的结果是一个 XML 文档,其中包含关于指定的股票代号的许多信息。清单 3 给出股票报价服务对于股票代号 IBM 的输出示例。输出的 XML 包含许多信息,比如报告股票价格的日期和时间、开盘价和收盘价、价格变化的百分比、本交易日的最高价和最低价、成交量、一年内的价格波动范围、每股收入和股票的 P/E 比率。在所有这些信息当中,我们只关心最近的价格,这一信息包含在 清单 3. 远程股票报价 Web 服务的 XML 响应示例
用 PHP 编写银行操作 REST 请求分配器 我们差不多已经实现和理解了所有必需的工件。最后一部分是 REST 请求分配器,它将所有三层的代码粘合在一起。在 PHP 中,很容易接收 REST 服务调用(在这个示例中是 HTTP POST),把请求分派给适当的服务函数,然后将结果返回给浏览器客户机。浏览器客户机和这个 PHP 模块之间的数据交换采用 JSON 格式,还需要一个用 PHP 编写的 JSON 解析器。我们将使用 PEAR.net 提供的一个开放源码 JSON 解析器。本节提供 REST 请求分配器 PHP 模块的实现细节并进行说明。 按照以下步骤实现 REST 请求分配器 PHP 模块:
BankActions_REST_Service.php 中的代码逻辑分派浏览器客户机请求,执行所请求的银行出纳员操作。这个 PHP 模块依赖于另外三个 PHP 模块。其中两个模块是这个项目的一部分(BankLogic.php 和 GetStockPrice.php),另一个模块是一个用 PHP 编写的外部开放源码 JSON 解析器。我们已经讨论了两个 PHP 模块中的所有函数。JSON.php 库非常容易使用。它让我们很容易在 PHP 编程环境中使用 JSON。JSON.php 提供的 JSON 解析器包含以下函数:
每当浏览器客户机向银行场景中间层服务发出 REST(HTTP POST)服务调用时,BankActions_REST_Service.php 中的代码首先收集浏览器客户机发送的服务输入。浏览器客户机发送的输入数据可以在 PHP 服务器的超级全局 $_REQUEST 关联数组中找到,采用键 - 值对的形式。浏览器客户机发送的输入数据包含两个键 - 值对。其中之一包含需要执行的银行出纳员命令。它常常是存款、取款或获取/更新股票组合价值。另一个数据项包含执行银行出纳员命令所需的应用程序特有数据。这些数据用 JSON 格式进行编码。解析银行出纳员命令和服务输入数据之后,这里的逻辑使用 JSON 解析器将 JSON 格式的文本转换为 PHP 对象。在此之后,一个开关语句将控制传递给其他 PHP 模块中适当的银行出纳员函数。在调用这些函数时,将从 JSON 文本解析出来的参数传递给它们。当银行出纳员函数返回时,它们在一个 PHP 关联数组中提供最终结果(成功或失败)。将最终结果数据转换为 JSON 格式的文本,并返回给浏览器客户机。 现在,我们已经实现并解释了端到端银行场景的三层上所有的代码工件。 清单 4. BankActions_REST_Service.php 文件的内容
|
集成银行场景组件
现在,已经开发了银行场景所需的 Ajax 客户机、PHP 中间层服务和 MySQL 数据库组件,如下所示:
这些组件分别处理银行场景中的一项任务。正如在这个系列中看到的,每个组件依赖于其他一些组件,从而连接成银行场景的端到端体系结构。在典型的三层 Web 应用程序中,为了集成各个应用程序组件,.NET 这样的底层框架需要详细配置依赖项。但是,用于实现这个场景的技术不需要这么复杂的集成过程。在实现这些组件时,已经考虑到了必需的所有依赖项。Ajax(XHTML、CSS、JavaScript、REST、JSON)、PHP 或 MySQL 都不需要应用程序特有的运行时集成,因此大大减少了端到端应用程序的开销和复杂性。
部署银行场景组件
既然已经开发并集成了各个银行场景组件,就该在 Zend Core PHP 服务器上部署它们了。请记住,Zend Core 是在 Apache Web 服务器中运行的。
这些步骤将文件部署到 Zend Core 上并启动 Eclipse 内部浏览器。现在可以关闭 Eclipse 内部浏览器。
如果在 Eclipse Browser 屏幕上出现了银行出纳员应用程序主菜单,就说明一切顺利。如果没有,就需要检查是否不小心跳过了某些步骤。部署和运行端到端 Ajax 应用程序就这么简单。
测试银行场景组件
现在,该享受本系列中所有工作的成果了!银行场景已经到了可以进行测试的状态。按照以下步骤测试在三层上开发和部署的代码,测试银行出纳员操作的效果:
http://localhost/BankTeller
(这是在本地机器上运行的银行场景应用程序的 URL)并按 Enter。 125.00
,见 图 5。 这个测试过程说明,这个单页面 Web 应用程序可以与中间层和数据层上的应用程序工件进行交互,顺畅地执行比较复杂的任务。
调试方法
在任何软件开发环境中,调试工具对于项目的开发速度和质量都非常重要。在银行场景这样的多层 Web 应用程序中,调试器是必不可少的开发工具。我们需要的一项功能是在一个 IDE 中调试 Web 应用程序的所有层 —— 目前这还不可行。但是,最近的基于 Eclipse 的开放源码成果,比如 PHP Development Tool(PDT)和 Aptana Web IDE,很有希望实现这个功能。因为它们都插入到相同的 Eclipse 平台中,所以我们可以期望它们不久之后就能够提供端到端调试功能,让开发人员能够在 JavaScript 函数中设置断点,同时在 PHP 函数中设置另一个断点。这样就可以在浏览器和 Zend Core 服务器上同时调试一个端到端事务。
PDT 和 Aptana 分别为 PHP 和 JavaScript 提供了出色的调试特性。Aptana 与流行的浏览器(比如 Firefox、Internet Explorer、Safari 和 Opera)集成,可以进行 JavaScript 调试。与它相似,Firebug(一个 Firefox 插件)也提供了出色的 JavaScript 调试特性。但是,到编写本文时,这些调试工具还无法一起配合工作,所以无法同时调试浏览器代码和服务器代码。
由于目前没有端到端调试器,所以本文介绍的调试过程分成下面两个部分。这两个调试方法的效果都不错,可以单独调试端到端银行场景的服务器部分和浏览器部分。
调试服务器端 PHP 代码
按照以下步骤使用 PDT 调试器调试中间层 PHP 服务器逻辑。以下说明假设已经部署了银行场景应用程序,并按照前两节中的描述进行了一般测试。
index.php
。 $json = new Services_JSON()
。 echo($responseToBeSent)
。 注意:到编写本文时,PDT 调试器有一个小问题需要注意。在 PHP 调试会话期间,在完成一个 PHP 脚本的调试之后,可能会在 Debug 视图中看到下面这样的一个或多个消息:
。在完成整个应用程序的调试过程之前,不要删除它们。到编写本文时,如果删除这些消息,那么就无法在同一个调试会话中调试后续的应用程序函数,可能必须启动一个新的调试会话。当 PDT 从非正式版本(RC3)变成正式版本时,这个问题和内部浏览器超时问题可能会被修复。
调试客户端 JavaScript 代码
按照以下步骤使用本系列 第 1 部分 中安装的 Firebug 调试器调试客户端 JavaScript 逻辑。以下说明假设已经部署了银行场景应用程序,并按照前面的描述进行了一般测试。
http://localhost/BankTeller
。 var textResult = teller_request.responseText;
。 portfolioAction_Async()
。 这就是用 Firebug 调试 Ajax 应用程序的方法。它提供了许多容易使用的特性,并与 Firefox 浏览器很好地集成。按照我的观点,Firebug 优雅而且简单,未来的调试器产品应该会借鉴它的风格。
小结
在 本系列的三篇文章 中,我们研究了开发端到端 Ajax 应用程序的各个阶段。本系列的目标之一是让您体会一下 Ajax Web 应用程序提供的许多改进。下一节列出了一部分改进。如果您能够通过我们的端到端 Ajax 应用程序体会到它们的效果,本系列的目标就实现了。
要点
结束语
![]() |
|
您刚刚开发了一个跨越三层(客户机层、中间层和数据层)的 Ajax 应用程序。我们使用几种开放源码技术以构建和部署这个应用程序。在这个过程中,使用了 Zend Core 的一些核心特性和一些 Eclipse IDE 工具。我们讨论了 MySQL、PHP、Ajax(XHTML、CSS、JavaScript、XHR)、REST、JSON、XML 和 Web 服务客户机的概念。还了解了 Eclipse IDE 中 PHP 和 Aptana 透视图的使用方法,学习了如何用 Zend Core/Apache 服务器进行部署和测试。本文提供了一个可下载的文件(见 下载),其中包含本文中使用的 JavaScript 客户端代码、PHP Web 服务客户机、PHP REST 请求分配器和股票报价服务 WSDL。
这个银行场景覆盖了 Ajax、PHP 和 MySQL 的基本概念。掌握了本系列提供的基本知识之后,可以继续学习这些强大的开放源码技术,用它们进行更高级的 Web 应用程序开发。
总之,本系列演示了 Zend Core 和 Eclipse(PDT 和 Aptana)开发环境的强大功能。对于中小型企业而言,它们是非常可靠的技术组合,它们可以作为开放源码中间件,还可以帮助企业从 .NET 环境迁移到开放源码环境。还可以通过这些运行时环境和基于 Eclipse 的工具对厂商提供的商业软件和服务进行扩展。最后,由于 Zend 和 Aptana 的开发人员在 Zend Core、Eclipse PDT 和 Aptana Web IDE 项目上的努力,这种新的 Web 开发方式得到了简化。
![]() ![]() |
![]()
|
下载
名字 | 大小 | 下载方法 |
---|---|---|
wa-aj-end2end3.zip | 28KB | HTTP |
![]() |
||||
![]() |
关于下载方法的信息 | ![]() |
参考资料
学习关于作者
![]() |
||
![]() |
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 开发。 |