元素。在新显示的屏幕（存款、取款或股票组合价值）上，列出了所有帐户持有人的姓名。出纳员可以从这个列表中选择一个帐户持有人，并执行所需的银行出纳员操作。
hideShowAndInsertAsTopElement 是一个实用程序函数，它有几个输入参数，比如要隐藏的元素、要显示的元素、具有焦点的元素的 id、在输入字段上设置的可选的光标位置以及是否显示页脚的选项。它根据输入参数显示或隐藏对应的元素。它还可以通过其他输入参数实现其他效果。
populateDropDownListWithAccountOwnersData 函数将所有帐户持有人的姓名插入一个列表框。这帮助银行出纳员选择一个特定的客户以执行所需的出纳员函数。这个函数还对帐户持有人的姓名进行排序。
updateTellerActionResultTextArea 函数更新一个文本区域中的银行出纳员操作的结果。另一个函数 processFooterOperation 处理页脚中可用的选项。
现在，我们来看看与 XHR 相关的函数。因为我们的应用程序是一个真正的单页面 Ajax 应用程序，所以表示内容只在应用程序启动时下载一次。在此之后，浏览器客户机对服务器的访问仅仅是为了交换应用程序特有的数据。通过以 REST（Representational State Transfer）风格访问中间层服务，使用一个 XHR 对象以异步方式执行数据交换。REST 使用 HTTP 动词，比如 PUT、GET、POST 和 DELETE，这指出如何通过数据交换访问远程服务器资源。（关于 REST 的更多信息参见参考资料。）
在许多 Ajax 应用程序中，XHR 与 REST 访问机制配合得很好。正如前几节中提到的，这个应用程序使用 JSON 格式进行数据编码。在这个应用程序中，在浏览器和中间层服务之间有四种不同的数据交换。这四种数据交换涉及的过程是非常相似的。因此，这里只对银行出纳员存款操作的数据交换进行说明。每次数据交换通过两个不同的 JavaScript 函数完成：一个函数向中间层服务发送请求，另一个函数以异步方式接收服务器响应数据。当银行出纳员执行存款操作时，他输入存款数量并选择帐户持有人姓名，然后按 Deposit 按钮。这个按钮的 onclick 事件处理函数设置为 depositAmountAction_Async。在这个函数中，从输入字段读取存款数量并进行检验。然后，从下拉列表中选择帐户持有人姓名，从完全限定的文档 URL 获得主机名。这时，创建一个 JSON 对象，它有两个对象属性：帐户持有人姓名和存款数量。这就是用 REST 和 HTTP 动词 POST 发送到中间层服务的数据。
为了将 JSON 对象转换为 JSON 格式的字符串，要使用 json.js 文件（由 Douglas Crockford 开发）中的一个实用程序函数。然后，创建一个 HTTP POST 查询字符串，其中包含两个键 - 值对。第一个键 - 值对告诉中间层服务需要执行什么资源或命令 —— 在这个示例中，它是存款命令。第二个键 - 值对告诉中间层服务从浏览器传入的请求数据 —— 在这个示例中，它是由帐户持有人姓名和存款数量组成的 JSON 格式的数据。然后，指定中间层服务的 URL。在此之后，创建一个新的 XHR 对象；最重要的是，设置回调函数 http_response_async_callback_for_deposit_to_account。然后调用 xhr.js 中的实用程序函数 sendHttpRequest，用 XHR 对象、回调函数、中间层服务 URL 和 POST 数据作为输入参数。这会向中间层服务发送存款操作的数据交换请求。
现在看看这个回调函数。在每次 HTTP 状态转换时，都调用这个回调函数。但是，在这个回调函数中检查的 HTTP 状态只有 HTTP_READYSTATE_LOADED 和 HTTP_STATUS_OK。这两个状态表示已经完整地收到了服务器响应数据，而且 HTTP 内部状态码是 200。如果这两个条件都满足，那么从 XHR 对象的内部属性 responseText 读取服务器响应数据。可以使用 json.js 中的实用程序函数 parseJSON 安全可靠地转换这个 JSON 格式的字符串数据。这个转换操作会产生一个 JavaScript 对象。在这个对象中，检查应用程序特有的状态，了解存款操作是否成功了。如果成功了，就将返回的帐户信息对象存储在全局变量 tellerActionResultInfo 中。最后，隐藏当前的存款操作屏幕，显示银行出纳员操作结果屏幕，并更新结果数据。
前面的段落对客户端 JavaScript 代码的内部逻辑做了高层面的说明。为了简洁，客户端逻辑没有处理真实环境中可能发生的许多运行时错误。请务必仔细查看清单 1 并阅读其中的注释。
下面几节关注 Web 服务并完成银行场景实现的其余部分。
Web 服务 是一个描述一组操作的接口，可以用 XML 和 JSON 等标准化消息格式通过网络访问这些操作。Web 服务主要用于程序之间的交互。Web 服务使应用程序可以更快速、轻松而且成本低廉地集成起来。通常在协议栈的较高层，基于以业务服务语义为中心的消息进行集成。这样就可以在企业内外以通用的方式对业务功能进行松散的集成。
实现通用 Web 服务模型的关键是一组标准。比较重要的标准包括 HTTP、SOAP、REST、XML、JSON 和 WSDL（Web Services Description Language）。
图 2 描述了 Web 服务模型中涉及的重要角色和交互。Web 服务体系结构模型中涉及三个角色： 服务提供者 服务注册处 服务请求者
 
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）与服务接口中的一个绑定元素关联起来。服务元素包含端口元素的集合。

银行出纳员操作之一是获得给定的帐户持有人的当前股票组合价值。当银行出纳员从 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 服务客户机： 切换到 Eclipse PHP 透视图：单击 Window->Open Perspective->Other->PHP 并单击 OK。 在 PHP Explorer 视图（左上方）中，右击 BankTeller 项目并选择 New->PHP File。 输入文件名 GetStockPrice.php。 单击 Finish。
输入或粘贴清单 2 中的源代码作为这个文件的内容并保存文件。可以通过这个文件中的注释了解代码的作用，或者参考下一节中对代码逻辑的解释。
 
1,"exceptions"=>0)); // Set the required input parameter for the remote service. // In our case, it is just the ticker symbol. $param[‘symbol‘] = $tickerSymbol; // Execute the remote logic. It is that simple. $result = $proxy->GetQuote($param); // You have the XML-based response string now. $quoteResult = $result->GetQuoteResult; // Convert the XML formatted string into a DOM object. // PHP also does XML processing so elegantly and simply. $xml = simplexml_load_string($quoteResult); $stockPrice = 0.0; // The XML-based stock quote response is somewhat elaborative. // It contains information about different aspects of the given stock. // We are interested only in the current market price of that stock. // That information is available as: // ...56.34... // All we have to do is just parse the value of the XML element. // See for yourself how easy it is to do this in PHP. if (property_exists($xml, "Stock") == true) { // We have the element in the Web service response. $stockInfo = $xml->Stock; // Now, check if the element contains a child named . if (property_exists($stockInfo, "Last")) { // Just retrieve the last market price of this stock. $stockPrice = $stockInfo->Last; } else { $finalResult["ResultCode"] = 1; $finalResult["ResultMsg"] = "Unable to get current stock price of " . "$accountHolderName‘s stock $tickerSymbol."; return($finalResult); } // End of if (property_exists($stockInfo, "Last")) } else { $finalResult["ResultCode"] = 1; $finalResult["ResultMsg"] = "Unable to get current stock price of " . "$accountHolderName‘s stock $tickerSymbol."; return($finalResult); } // End of if (property_exists($xml, "Stock") == true) // Now that we have the current stock price, compute the // portfolio value and update it in the DB. // Return the result to the caller of this function. $finalResult = portfolioValue($accountHolderName, $stockPrice); return($finalResult); } // End of function getStockPortfolioValue ?>
前一节中创建 Web 服务客户机的过程只是 PHP SOAP 客户机库支持的简单方式之一。GetStockPrice.php 中的逻辑让 Web 服务客户机访问 URL http://www.webserviceX.net 上的股票报价服务。PHP SOAP 客户机库直接指向服务提供者发布的 WSDL URL，并使用 WSDL 中的服务描述信息在内存中动态地创建一个内部服务代理。然后，代理代码进行远程调用；因此，对于客户机而言，股票报价功能就像是在本地一样。在这个示例中，客户机代理使用 SOAP 访问协议与远程股票报价服务进行交互，它发送一个股票代号作为输入，然后接收股票报价服务输出的一个 XML 文档。
GetStockPrice.php 中的逻辑很简单，它只包含一个函数：getStockPortfolioValue。这个 PHP 模块需要通过 BankLogic.php 模块让这里的数据库访问函数可用。getStockPortfolioValue 函数接受一个帐户持有人姓名参数，并为这个帐户计算和更新股票组合价值。它获取数据库中存储的所有帐户信息，并过滤出属于给定帐户持有人的信息。可以不获取所有帐户的信息，而是只获取特定帐户持有人的帐户信息。（这个修改留给您作为练习。）在过滤后的帐户信息中，获得股票组合中一只股票的代号。然后，实例化一个 PHP SoapClient 对象，并将股票报价服务 WSDL URL 作为参数传递给类构造器。股票代号作为这个 Web 服务的输入参数。然后调用代理上的 GetQuote 方法，这个方法会对远程 Web 服务进行 SOAP 调用。调用成功时，Web 服务返回一个 XML 格式的字符串。PHP 提供了将 XML 字符串转换为 XML DOM 对象结构的简便方法。在这个 XML 树中， 元素包含股票当前的市场价格。解析 的值。最后，调用 Bank Logic PHP 模块中的 portfolioValue 函数，并以帐户持有人姓名和当前股票价格作为参数。这个函数使用当前股票价格计算新的股票组合价值，更新数据库并返回一个关联数组，其中包含以前的股票组合价值和当前的价值。这个关联数组也返回给 getStockPortfolio 函数的调用者。
远程股票报价服务的结果是一个 XML 文档，其中包含关于指定的股票代号的许多信息。清单 3 给出股票报价服务对于股票代号 IBM 的输出示例。输出的 XML 包含许多信息，比如报告股票价格的日期和时间、开盘价和收盘价、价格变化的百分比、本交易日的最高价和最低价、成交量、一年内的价格波动范围、每股收入和股票的 P/E 比率。在所有这些信息当中，我们只关心最近的价格，这一信息包含在 XML 元素中。getStockPrice 方法中其余的代码使用 DOM 解析器对 Web 服务的整个 XML 结果进行解析。
IBM 101.17 4/27/2007 4:01pm +0.27 100.30 101.17 100.06 6141359 152.3B 100.90 +0.27% 72.73 - 101.17 6.262 16.11 INTL BUSINESS MAC
我们差不多已经实现和理解了所有必需的工件。最后一部分是 REST 请求分配器，它将所有三层的代码粘合在一起。在 PHP 中，很容易接收 REST 服务调用（在这个示例中是 HTTP POST），把请求分派给适当的服务函数，然后将结果返回给浏览器客户机。浏览器客户机和这个 PHP 模块之间的数据交换采用 JSON 格式，还需要一个用 PHP 编写的 JSON 解析器。我们将使用 PEAR.net 提供的一个开放源码 JSON 解析器。本节提供 REST 请求分配器 PHP 模块的实现细节并进行说明。
按照以下步骤实现 REST 请求分配器 PHP 模块： 切换到 Eclipse PHP 透视图：选择 Window->Open Perspective->Other->PHP 并单击 OK。 在 PHP Explorer 视图（左上方）中，右击 BankTeller 项目并选择 New->PHP File： 输入文件名 JSON.php。 单击 Finish。
打开浏览器并访问 URL：http://mike.teczno.com/JSON/JSON.phps： 将浏览器中显示的所有内容复制到剪贴板，关闭浏览器。 在 Eclipse 编辑器中粘贴剪贴板中的内容，替换 JSON.php 文件的所有内容。 单击 File->Save 关闭文件。
在 PHP Explorer 视图（左上方）中，右击 BankTeller 项目并选择 New->PHP File： 输入文件名 BankActions_REST_Service.php。 单击 Finish。
输入或粘贴清单 4 中的源代码以替换这个文件的内容，单击 File->Save 保存文件。
 
BankActions_REST_Service.php 中的代码逻辑分派浏览器客户机请求，执行所请求的银行出纳员操作。这个 PHP 模块依赖于另外三个 PHP 模块。其中两个模块是这个项目的一部分（BankLogic.php 和 GetStockPrice.php），另一个模块是一个用 PHP 编写的外部开放源码 JSON 解析器。我们已经讨论了两个 PHP 模块中的所有函数。JSON.php 库非常容易使用。它让我们很容易在 PHP 编程环境中使用 JSON。JSON.php 提供的 JSON 解析器包含以下函数： decode() 将 JSON 数据转换为 PHP 对象。 encode() 将 PHP 关联数组转换为 JSON 数据结构。
 
每当浏览器客户机向银行场景中间层服务发出 REST（HTTP POST）服务调用时，BankActions_REST_Service.php 中的代码首先收集浏览器客户机发送的服务输入。浏览器客户机发送的输入数据可以在 PHP 服务器的超级全局 $_REQUEST 关联数组中找到，采用键 - 值对的形式。浏览器客户机发送的输入数据包含两个键 - 值对。其中之一包含需要执行的银行出纳员命令。它常常是存款、取款或获取/更新股票组合价值。另一个数据项包含执行银行出纳员命令所需的应用程序特有数据。这些数据用 JSON 格式进行编码。解析银行出纳员命令和服务输入数据之后，这里的逻辑使用 JSON 解析器将 JSON 格式的文本转换为 PHP 对象。在此之后，一个开关语句将控制传递给其他 PHP 模块中适当的银行出纳员函数。在调用这些函数时，将从 JSON 文本解析出来的参数传递给它们。当银行出纳员函数返回时，它们在一个 PHP 关联数组中提供最终结果（成功或失败）。将最终结果数据转换为 JSON 格式的文本，并返回给浏览器客户机。
现在，我们已经实现并解释了端到端银行场景的三层上所有的代码工件。
decode($bankTellerPostData); $responseToBeSent = ""; $bankActionResult = null; // Switch through the bank teller command issued by the browser client. switch($bankTellerCommand) { case GET_ALL_ACCOUNTS_INFO: // Go and get all the account information stored in the database. $bankActionResult = getAllAccountInformation(); break; case DEPOSIT_TO_ACCOUNT: // Perform the deposit account transaction. // Pass the account holder name and the deposit amount as // sent by the browser client. Third parameter of 1 indicates DEPOSIT. // This function is available in BankLogic.php $bankActionResult = accountTransaction( $bankTellerInput->accountHolderName, $bankTellerInput->amount, 1); break; case DEBIT_FROM_ACCOUNT: // Perform the debit account transaction. // Pass the account holder name and the debit amount as // sent by the browser client. Third parameter of 2 indicates DEBIT. // This function is available in BankLogic.php $bankActionResult = accountTransaction( $bankTellerInput->accountHolderName, $bankTellerInput->amount, 2); break; case GET_STOCK_PORTFOLIO_VALUE: // Perform the "Update Stock Portfolio Value" transaction. // This will require going out on the Internet to a remote Web service. // This function is available in GetStockPrice.php $bankActionResult = getStockPortfolioValue($bankTellerInput->accountHolderName); break; default: // Invalid Bank teller command. $bankActionResult["ResultCode"] = 1; $bankActionResult["ResultMsg"] = "Invalid Teller Command"; } // End of switch($bankTellerCommand) // We completed everything that the client asked us to do. // Let us return the final results in JSON formatted text. // It takes one line of code in PHP to convert a // PHP associative array data structure into JSON formatted text. $responseToBeSent = $json->encode($bankActionResult); // Set the HTTP header to indicate that we are sending JSON plain text data. // There are also efforts underway at this time (MAY/2007) to define a // new content type called text/json. header("Content-Type: text/plain"); // That is it. Return the JSON formatted response in // RESTful way back to the browser now. echo($responseToBeSent); ?>
现在，已经开发了银行场景所需的 Ajax 客户机、PHP 中间层服务和 MySQL 数据库组件，如下所示： BankDB（基于 MySQL 的银行数据库） BankLogic（一个 PHP 模块中银行出纳员函数的代码逻辑） BankPortal（使用 Ajax 技术的银行出纳员 Web 客户机） BankActions（用 PHP 编写的银行出纳员操作 REST 服务） Stock Quote Web 服务客户机（使用 PHP SOAP Client 库的 SOAP 代理）
 
这些组件分别处理银行场景中的一项任务。正如在这个系列中看到的，每个组件依赖于其他一些组件，从而连接成银行场景的端到端体系结构。在典型的三层 Web 应用程序中，为了集成各个应用程序组件，.NET 这样的底层框架需要详细配置依赖项。但是，用于实现这个场景的技术不需要这么复杂的集成过程。在实现这些组件时，已经考虑到了必需的所有依赖项。Ajax（XHTML、CSS、JavaScript、REST、JSON）、PHP 或 MySQL 都不需要应用程序特有的运行时集成，因此大大减少了端到端应用程序的开销和复杂性。
既然已经开发并集成了各个银行场景组件，就该在 Zend Core PHP 服务器上部署它们了。请记住，Zend Core 是在 Apache Web 服务器中运行的。
确保激活 Eclipse PHP 透视图：单击 Window->Open Perspective->Other->PHP 并单击 OK。 确保选择 Window->Web Browser->Internal Web Browser 选项。 在 PHP Explorer 视图（左上方）中，右击 BankTeller 项目并选择 Run As->Run： 在 Run 对话框的左面板中，单击 “PHP Web Page” 选项旁边的 + 符号展开它。 检查在 “PHP Web Page” 选项下面是否有一个称为 New_configuration 的条目。 如果没有看到 New_Configuration 条目，那么右击 PHP Web Page 并选择 New 以创建条目。 单击 New_Configuration 条目。 在同一对话框的右面板中，会看到 New_Configuation 的各个配置参数。确保 Server 字段设置为 Default PHP Web Server。 在 File/Project 字段中，单击 Browse 按钮，选择 BankTeller 并单击 OK。 确保选中 Publish files to Server 复选框。 在 Publish To: 字段中，追加文本 BankTeller，从而将这个配置参数设置为 C:\Program Files\Zend\Apache2\htdocs\BankTeller。 确保选中 Auto Generate 复选框。 单击 Run。
这些步骤将文件部署到 Zend Core 上并启动 Eclipse 内部浏览器。现在可以关闭 Eclipse 内部浏览器。
如果在 Eclipse Browser 屏幕上出现了银行出纳员应用程序主菜单，就说明一切顺利。如果没有，就需要检查是否不小心跳过了某些步骤。部署和运行端到端 Ajax 应用程序就这么简单。
现在，该享受本系列中所有工作的成果了！银行场景已经到了可以进行测试的状态。按照以下步骤测试在三层上开发和部署的代码，测试银行出纳员操作的效果：
在 Eclipse 工具栏上，单击 Eclipse 内部 Web 浏览器图标（像地球的图标）。 确定 Eclipse 内部浏览器启动了。 在浏览器的 URL 地址字段中，输入 http://localhost/BankTeller（这是在本地机器上运行的银行场景应用程序的 URL）并按 Enter。 这时会显示银行出纳员应用程序的主屏幕，见图 4。正如前面指出的，这是银行出纳员应用程序惟一的 Web 页面。在测试这个应用程序时，您可以随时注意 URL。这是整个应用程序运行期间看到的惟一 URL。这个应用程序的各个部分（或者说屏幕）都是这个页面的一部分。现在，这些屏幕的用户界面控件都是隐藏的，只有主屏幕是可见的。Ajax 技术的要点就是，在这个浏览器会话期间，这个应用程序不再从服务器进行页面刷新。 可以将鼠标指针移入和移出菜单项。您会看到菜单项突出显示和恢复一般状态。这是一种简单的 Ajax 特性，只需在发生 mouseover 和 mouseout 事件时修改包含菜单文本的 元素的 CSS 类样式即可。 单击第一个菜单项 “Deposit to an account”，这会以 Ajax 方式显示存款屏幕（无需服务器的帮助）。这时应该会看到一个列表框，其中包含当前的所有帐户持有人。这些帐户数据是使用 Ajax 异步 XHR 功能在后台从中间层服务器获得的。还可以注意到页脚中显示一个虚构的银行出纳员姓名，它还提供一个返回主菜单的选项。 选择一个帐户持有人 Merry 并输入存款数量 125.00，见图 5。 单击 Deposit。应该会看到图 6 所示的结果页面，其中显示交易细节。 单击页脚中的 Back to main menu 链接。
单击第二个菜单项 Debit from an account。这会立即打开取款屏幕，没有延迟。 选择一个帐户持有人，输入取款数量，并单击 Debit。 检查从服务器返回的结果数据。 单击页脚中的 Back to main menu 链接。
单击第三个菜单项 Current portfolio value。这会立即打开股票组合价值屏幕： 在列表框中，选择帐户持有人 Gandalf，见图 7。 单击 Get Stock Portfolio Value。应该会看到图 8 所示的结果页面，其中显示更新的股票组合价值。这个银行出纳员操作向中间层 PHP 服务发送一个 REST 请求，进而为远程股票报价服务创建一个动态的 Web 服务客户机，并调用这个服务。然后在数据库中更新新的股票价格，计算新的股票组合价值并返回给浏览器客户机。 单击页脚中的 Back to main menu 链接。
关闭 Eclipse 内部 Web 浏览器。
这个测试过程说明，这个单页面 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 调试特性。但是，到编写本文时，这些调试工具还无法一起配合工作，所以无法同时调试浏览器代码和服务器代码。
由于目前没有端到端调试器，所以本文介绍的调试过程分成下面两个部分。这两个调试方法的效果都不错，可以单独调试端到端银行场景的服务器部分和浏览器部分。
使用 PDT 调试器调试 Zend Core 服务器上的 PHP 代码。 使用 Firebug 调试器调试 Firefox 浏览器上的客户端 JavaScript 代码。
按照以下步骤使用 PDT 调试器调试中间层 PHP 服务器逻辑。以下说明假设已经部署了银行场景应用程序，并按照前两节中的描述进行了一般测试。
确保激活 Eclipse PHP 透视图：单击 Window->Open Perspective->Other->PHP 并单击 OK。 确保选择 Window->Web Browser->Internal Web Browser 选项。 到编写本文时，应用程序的初始页面必须是 PHP 文件，PDT 和 Zend 调试器才能起作用。因此，必须将 index.html 文件重命名为 index.php。这只改变文件扩展名，根本不会影响应用程序的行为： 在 PHP project explorer 视图中，右击 BankTeller 项目下面的 index.html 并选择 Refactor->Rename。 将文件名改为 index.php。
在 Eclipse PHP project explorer 视图中，右击 BankTeller 项目并选择 Debug As->Debug： 在 Debug 对话框的左面板中，选择 PHP Web Page->New_configuration。这时会显示一个右面板，其底部有一个 Debug 按钮。 单击 Debug。 如果提示打开 PHP Debug 透视图，那么单击 Yes。这会打开 PHP Debug 透视图，其中同时打开了 index.php 文件和 Eclipse 内部浏览器。调试器将停在 index.php 文件顶部（这个文件只包含 HTML 脚本，没有任何 PHP 代码）。 快速单击 Debug 视图（屏幕左上方）中的 Resume 图标（绿色箭头和黄色条）。如果过了 60 秒还没有单击，那么内部浏览器就会超时，必须从头开始调试步骤。 在最初装载页面时，我们使用 Ajax XHR 从服务器获取所有帐户信息。当 XHR 请求到达 Zend Core 服务器时，调试器停在 REST 请求分配器 PHP 文件的第一行。（调试器被配置为停在执行的 PHP 文件的第一行。这是除了我们设置的断点之外的默认断点。） 现在可以通过 Debug 视图顶部的图标使用各种调试特性，比如分步执行函数或跳过函数。 除了这些调试特性之外，还可以检查 PHP 代码中应用程序变量的值。这需要使用 Debug 透视图中的 Variables 视图。 为了避免浏览器超时，应该在 60 秒内完成检查并单击 Debug 视图中的 Resume 图标（绿色箭头和黄色条）。
我们来试试在 PHP 代码中设置断点： 切换到 PHP 透视图。 在 BankTeller 项目中，打开 BankActions_REST_Service.php 文件。 在这个文件中，找到 PHP 语句 $json = new Services_JSON()。 双击这个语句的行号（在编辑器的最左边）。这样就会在这个语句上设置一个断点。 前进到这个文件的末尾，在最后一行上设置另一个断点：echo($responseToBeSent)。 切换到 Eclipse PHP Debug 透视图。 如果现在 Eclipse 内部浏览器打开着，就关闭它。 在 Eclipse 菜单栏中，选择 Run->Debug 菜单项。这会打开 Debug 对话框。 在这个对话框的右面板中，单击 Advanced 选项卡。 在 Breakpoint 部分中，选择 Override project/workspace Break at First Line 复选框。取消选中 Break at First Line 复选框。 单击 Debug。这会启动内部浏览器，并直接跳到 JSON 语句上设置的第一个断点。它停在这里是因为在最初装载页面时用 XHR 请求获取所有帐户信息。 可以单击 Debug 视图中的 Resume 图标。程序继续运行，并停在这个文件末尾的第二个断点。可以再次单击 Resume 图标继续执行。 现在可以切换到内部浏览器并执行任何银行出纳员操作。
在 PHP Debug 透视图中，单击 Breakpoints 视图。 右击任何断点并选择 Remove All。 如果出现确认对话框，就单击 Yes 确认。
注意：到编写本文时，PDT 调试器有一个小问题需要注意。在 PHP 调试会话期间，在完成一个 PHP 脚本的调试之后，可能会在 Debug 视图中看到下面这样的一个或多个消息： New_configuration [PHP Web Page]。在完成整个应用程序的调试过程之前，不要删除它们。到编写本文时，如果删除这些消息，那么就无法在同一个调试会话中调试后续的应用程序函数，可能必须启动一个新的调试会话。当 PDT 从非正式版本（RC3）变成正式版本时，这个问题和内部浏览器超时问题可能会被修复。
按照以下步骤使用本系列第 1 部分 中安装的 Firebug 调试器调试客户端 JavaScript 逻辑。以下说明假设已经部署了银行场景应用程序，并按照前面的描述进行了一般测试。
在自己的机器上启动 Firefox 浏览器。 输入 URL：http://localhost/BankTeller。 确定浏览器屏幕上出现了银行出纳员应用程序主菜单。 在 Firefox 菜单栏上，单击 Tools->Firebug->Open Firebug。这会在 Firefox 浏览器窗口的底部打开 Firebug 窗口。 单击 Firebug 窗口中的 HTML 选项卡： 展开 HTML 的 部分。 在这里显示的 HTML 文本中，将鼠标移动到

元素对应的部分。 将鼠标移动到文本

也进行同样的检查。 尽管在这个屏幕上隐藏了 pageFooter，但是 Firebug 仍然能够显示它。
单击 Firebug 窗口的 CSS 选项卡。可以查看这个应用程序的整个 CSS 文件。 单击 Firebug 窗口的 Script 选项卡。可以查看这个应用程序中使用的所有 JavaScript 文件。 在 Firebug 窗口顶部，单击 JavaScript 文件名旁边显示的向下箭头。可以选择这里列出的任何 JavaScript 文件并查看代码。
单击 Firebug 窗口的 DOM 选项卡。它显示银行出纳员浏览器应用程序的整个 DOM 结构。 单击 Firebug 窗口的 Net 选项卡： 这会显示银行出纳员应用程序中到目前为止的所有网络活动。 可以分别选择 HTML、CSS、JavaScript 和 Images，并查看 HTTP 头、Post 数据和响应数据。 还有一个图形视图，显示获取所选内容类型所花费的时间。 在 Firebug 窗口顶部，单击 XHR。这显示银行出纳员应用程序中发生的 XHR 活动。到目前为止，只用 XHR 执行了一次数据交换。还显示访问的服务器 REST 资源。 展开 BankActions_REST_Service.php。 单击 Post 和 Response 选项卡，查看与中间层服务交换的 JSON 请求和响应数据。
我们利用这些 Firebug 调试特性试着调试一下 JavaScript 代码： 单击 Firebug 窗口的 Script 选项卡。 使用 Firebug 窗口顶部的向下箭头，选择 BankTeller.js。 滚动到 BankTeller.js 文件的末尾，找到这个文件中定义的最后一个函数。 在最后一个函数中，单击下面这行源代码的行号：var textResult = teller_request.responseText;。 这会在这一行上设置一个断点。（再次单击就会取消断点。在这个示例中，保留这一行上的断点。） 向上滚动到前一个函数：portfolioAction_Async()。 在这个函数的第一个源代码语句上设置一个断点。 在银行出纳员应用程序菜单上（在浏览器窗口的上半部），选择第 3 个选项（当前股票组合价值）。马上就会看到股票组合价值屏幕。 选择一个帐户持有人并单击 Get Stock Portfolio Value。JavaScript 代码的执行过程停在 portfolioAction_Async() 函数中的断点处。 在 Firebug 窗口的右下角，可以看到 continue、step over、step into 和 step out 调试器选项。 单击 step over 图标（或按 F10 键）。这会继续执行下一行。 可以继续执行几行，并在 Firebug 窗口右边查看变量值。 可以再继续执行几行，观察如何创建 JSON 对象并将它转换为 JSON 格式的字符串。 单击 Continue 图标（或按 F8 键）。 这会执行完当前函数 —— 向中间层服务器发送请求，要求获取股票组合价值。 如果机器已经连接到互联网，中间层 PHP 服务会调用远程股票报价 Web 服务，并向服务器返回结果。这会导致 JavaScript 代码停在 XHR 回调函数上设置的另一个断点处。 连续按 F10（step over），执行完这个函数的所有语句。请注意从服务器收到的 JSON 响应，以及如何用 parseJSON 进行解析。在执行过程中，还会看到如何隐藏一个应用程序屏幕（获得股票组合）并显示另一个应用程序屏幕（出纳员操作结果），也会看到这不需要从中间层服务器进行任何页面刷新。 单击银行出纳员应用程序的页脚中的 Back to main menu 链接。 关闭 Firebug 窗口。
关闭 Firefox 浏览器。
这就是用 Firebug 调试 Ajax 应用程序的方法。它提供了许多容易使用的特性，并与 Firefox 浏览器很好地集成。按照我的观点，Firebug 优雅而且简单，未来的调试器产品应该会借鉴它的风格。
在本系列的三篇文章 中，我们研究了开发端到端 Ajax 应用程序的各个阶段。本系列的目标之一是让您体会一下 Ajax Web 应用程序提供的许多改进。下一节列出了一部分改进。如果您能够通过我们的端到端 Ajax 应用程序体会到它们的效果，本系列的目标就实现了。
在这个 Ajax 应用程序中，需要单击链接并等待页面刷新吗？不需要。 由于 Web 应用程序中的所有客户端逻辑都放在本地，所以实现了快速响应。 在单击 Deposit、Debit 和 Get Stock Portfolio Value 按钮时，这个应用程序与 PHP 中间层服务器进行通信，交换少量数据。（这会显著改进网络带宽利用率。） 在使用这个应用程序时，用户看起来是在不同的页面之间导航。但实际上，只有一个 HTML 页面，只需隐藏和显示这个页面中的不同 DIV 元素，就可以实现页面切换效果。 以这种 Ajax 风格设计的 Web 应用程序可以在浏览器中实现丰富的用户交互方式。这会改进客户和用户的满意度。 采用这种体系结构的 Web 应用程序还会减少中间层服务器上的负载，因为服务器不再需要处理不必要的 HTML 页面刷新。相反，应用程序只在需要数据交换时才会联系服务器。 在操作这个应用程序时，您看到浏览器 URL 发生变化了吗？它没有变，整个应用程序只有这一个 URL。这说明它是一个单页面浏览器应用程序。表示内容（HTML、CSS 和 JavaScript）只在启动时从 Web 服务器下载一次。
 
developerWorks Ajax resource center
在Ajax 资源中心 可以找到关于 Ajax 编程模型的各种信息，包括文章、教程、论坛、blog、wiki、活动和新闻。
您刚刚开发了一个跨越三层（客户机层、中间层和数据层）的 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 28KBHTTP

关于下载方法的信息
学习
您可以参阅本文在 developerWorks 全球站点上的英文原文 。
阅读 “端到端 Ajax 应用程序开发” 系列中的其他文章。
阅读 Jesse James Garrett 所写的 “Ajax: A New Approach to Web Applications”，他在这篇文章中首创了 Ajax 这个词。
阅读IBM developerWorks Ajax 资源中心 中关于 Ajax 的文章和教程。
阅读IBM developerWorks PHP 资源中心 中关于 PHP 的文章和教程。
阅读PHP Manual Web 站点 上的 PHP API 文档。
了解Eclipse PDT 项目。
了解Aptana Web IDE。
了解Zend Core。
阅读关于 XMLHttpRequest 的W3C Working Draft。
阅读PHP MySQLi API 文档。
通过CSS Zen Garden 中令人惊异的演示，体会 CSS 的强大功能。
了解JSON 的所有相关信息。
“用 PHP 将 XML 转换成 JSON”（Senthil Nathan、Edward J Pring 和 John Morar，developerWorks，2007 年 1 月）：学习在 PHP 中如何将 XML 转换为 JSON。
阅读 Roy Fielding 关于REST 的研究报告。
在WebserviceX.net 上查看远程股票报价 Web 服务的 WSDL 文件。
浏览PEAR 上的开放源码 PHP 库。
获得产品和技术
从Mozilla 下载 Web 站点 下载 Mozilla Firefox 浏览器。
从MySQL 下载 Web 站点 下载 MySQL 数据库服务器。
从Zend 下载 Web 站点 下载 Zend Core。
从Zend PDT 下载 Web 站点 下载 Eclipse PDT（PHP Development Tools）。
从MySQL 连接器下载 Web 站点 下载 MySQL PHP 连接器。
从JSON Web 站点 下载 Douglas Crockford 编写的 JavaScript JSON 解析器。
下载PHP JSON 解析器。



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 开发。

开发端到端的 Ajax 应用程序，第 3 部分: 集成、测试、调试应用程序 开发端到端的 Ajax 应用程序，第 1 部分: 用一个场景设置 Ajax 环境 开发端到端的 Ajax 应用程序，第 2 部分: 实现 Ajax 客户机和服务器层 开发端到端的 Ajax 应用程序，第 1 部分: 用一个场景设置 Ajax 环境 SCA 应用程序开发，第 3 部分: 开发示例 SCA 应用程序 像专业人员一样开发 Ajax 应用程序，第 1 部分: 使用 Prototype Java... 掌握 Ajax，第 6 部分: 建立基于 DOM 的 Web 应用程序 开发保留标准浏览器功能的AJAX应用程序 SCA 应用程序开发: 第 1 部分：服务组件体系结构概述 SCA 应用程序开发，第 2 部分: 用于 Java 的 SCA 客户机和实现模型 远程调试你的应用程序－gdbserver 详解用radrails调试rails应用程序--Ruby -JavaEye做最棒的软件开发... 为 WebSphere Application Server Community Edition 开发 Spring 应用程序: 第 1 部分：Spring MVC 用AJAX开发智能Web应用程序之高级篇 用AJAX开发智能Web应用程序之高级篇 使用 HTML 5 创建移动 Web 应用程序，第 2 部分: 使用 HTML 5 开启移动 Web 应用程序的本地存储 概述：WEB应用程序的测试与优化 概述：WEB应用程序的测试与优化 为 WebSphere Application Server Community Edition 开发 Spring 应用程序: 第 2 部分：使用 Spring 进行数据库连接管理 使用 Dojo 的 Ajax 应用开发进阶教程，第 3 部分: 深入理解 CSS 开发J2ME联网应用程序 为iPhone 开发应用程序 为iPhone 开发应用程序 实战 Comet 应用程序开发