开发端到端的 Ajax 应用程序,第 3 部分: 集成、测试、调试应用程序
来源:百度文库 编辑:神马文学网 时间:2024/05/06 11:04:36
开发端到端的 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 的强大特性。
developerWorks Ajax 资源中心
请访问Ajax 资源中心,这里几乎囊括了关于 Ajax 编程模型的所有信息,包括各种文章和教程、论坛、博客、wikis、活动和新闻。
在开始学习本文之前,要确保(本系列第 2 部分 中开发的)Bank 场景工件 Bank DB、Bank Logic 和 Bank Portal 在 Eclipse IDE 中保持原样。这些工件包括创建和填充数据库的 SQL 脚本;提供数据库访问的 PHP 代码;以及单页面浏览器应用程序所需的 XHTML、CSS 和 XHR。用这些工件编写的代码只提供了图 1 所示的银行场景的一部分功能。还缺少将这些已经开发的工件组合起来的组件。如果预览 XHTML 文件,就会看到它在一个浏览器窗口中显示应用程序特有的各个 UI 屏幕。仍然需要编写适当的客户端 JavaScript 逻辑以集成这些 UI 屏幕,产生单页面浏览器应用程序的效果。在客户端代码中,还需要添加适当的 XHR 异步通信逻辑。如果没有客户端 JavaScript 代码,就无法执行银行出纳员功能。
现在已经到了用 Ajax 技术开发三个应用程序层的最后阶段。我们要使用 Zend Core 和 Eclipse IDE 工具构建、部署和测试应用程序。还要研究 MySQL、PHP、Ajax(XHTML、CSS、JavaScript、XHR)、REST、JSON、XML 和一个 Web 服务客户机。
您可能会注意到,提供特定银行出纳员功能的所有 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)这两种流行的数据交换格式。
在这个单页面浏览器应用程序中,需要通过客户端逻辑处理 Ajax 风格的用户界面并与中间层服务进行数据交换。正如本系列第 2 部分 所述,可以使用当前的许多 Ajax 框架和库之一进行开发。但是,由于我们只关注很少的几种 Ajax 特性,所以将用 JavaScript 编写客户端逻辑。这样做有助于我们将注意力集中在本文的 Ajax 相关目标上: 单页面浏览器应用程序 浏览器 DOM 操作 在应用程序的上下文中使用 XHR JSON 在应用程序数据交换方面的作用 Ajax 代码的客户端调试
一旦理解了这个银行场景中的 JavaScript 代码,您就可以尝试使用某个 Ajax 框架实现相同的客户端逻辑。无论采用哪种方式,基于 Eclipse 的 Aptana Web IDE 都是进行客户端代码开发的理想环境。
众所周知,JavaScript 提供了强大的语言特性。在浏览器环境中,JavaScript 提供了事件处理方法,可以捕捉用户操作和系统活动(比如计时器和网络事件)。在我们的银行场景中,将使用事件处理方法处理鼠标操作(mouseover、mouseout、mouseclick 等等),并使用 XML HTTP Request(XHR)对象处理服务器响应异步回调。
单页面浏览器应用程序只需在浏览器中输入应用程序 URL 时,从服务器下载一次所有与用户界面相关的代码工件(XHTML、CSS 和 JavaScript)。这意味着,客户端逻辑应该获得处理银行场景的客户端需求所需的所有东西。屏幕布局和相关联的样式是通过 XHTML 和 CSS 文件提供的。其他客户端逻辑由 JavaScript 代码提供。逻辑的主要部分涉及到分割不同的应用程序屏幕,并根据用户导航显示适当的一个屏幕。本系列的第 2 部分 讲解了如何使用
隔离应用程序层以产生干净优雅的 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 的强大特性。
请访问Ajax 资源中心,这里几乎囊括了关于 Ajax 编程模型的所有信息,包括各种文章和教程、论坛、博客、wikis、活动和新闻。
在开始学习本文之前,要确保(本系列第 2 部分 中开发的)Bank 场景工件 Bank DB、Bank Logic 和 Bank Portal 在 Eclipse IDE 中保持原样。这些工件包括创建和填充数据库的 SQL 脚本;提供数据库访问的 PHP 代码;以及单页面浏览器应用程序所需的 XHTML、CSS 和 XHR。用这些工件编写的代码只提供了图 1 所示的银行场景的一部分功能。还缺少将这些已经开发的工件组合起来的组件。如果预览 XHTML 文件,就会看到它在一个浏览器窗口中显示应用程序特有的各个 UI 屏幕。仍然需要编写适当的客户端 JavaScript 逻辑以集成这些 UI 屏幕,产生单页面浏览器应用程序的效果。在客户端代码中,还需要添加适当的 XHR 异步通信逻辑。如果没有客户端 JavaScript 代码,就无法执行银行出纳员功能。
您可能会注意到,提供特定银行出纳员功能的所有 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)这两种流行的数据交换格式。
在这个单页面浏览器应用程序中,需要通过客户端逻辑处理 Ajax 风格的用户界面并与中间层服务进行数据交换。正如本系列第 2 部分 所述,可以使用当前的许多 Ajax 框架和库之一进行开发。但是,由于我们只关注很少的几种 Ajax 特性,所以将用 JavaScript 编写客户端逻辑。这样做有助于我们将注意力集中在本文的 Ajax 相关目标上: 单页面浏览器应用程序 浏览器 DOM 操作 在应用程序的上下文中使用 XHR JSON 在应用程序数据交换方面的作用 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 以隐藏和显示