<!-- Load the Really Simple 
     History framework -->
<script type="text/javascript"
        src="../../framework/dhtmlHistory.js">
</script>

window.onload = initialize;
    
function initialize() {
  // initialize the DHTML History
  // framework
  dhtmlHistory.initialize();

indow.onload = initialize;
    
function initialize() {
  // initialize the DHTML History
  // framework
  dhtmlHistory.initialize();
  
  // subscribe to DHTML history change
  // events
  dhtmlHistory.addListener(historyChange);

/** Our callback to receive history change
     events. */
function historyChange(newLocation, 
                       historyData) {
  debug("A history change has occurred: "
        + "newLocation="+newLocation
        + ", historyData="+historyData, 
        true);
}

window.onload = initialize;
    
function initialize() {
  // initialize the DHTML History
  // framework
  dhtmlHistory.initialize();
  
  // subscribe to DHTML history change
  // events
  dhtmlHistory.addListener(historyChange);
      
  // if this is the first time we have
  // loaded the page...
  if (dhtmlHistory.isFirstLoad()) {
    debug("Adding values to browser "
          + "history", false);
    // start adding history
    dhtmlHistory.add("helloworld", 
                     "Hello World Data");
    dhtmlHistory.add("foobar", 33);
    dhtmlHistory.add("boobah", true);
      
    var complexObject = new Object();
    complexObject.value1 = 
                  "This is the first value";
    complexObject.value2 = 
                  "This is the second data";
    complexObject.value3 = new Array();
    complexObject.value3[0] = "array 1";
    complexObject.value3[1] = "array 2";
      
    dhtmlHistory.add("complexObject", 
                     complexObject);

window.onload = initialize;
    
function initialize() {
  // initialize the DHTML History
  // framework
  dhtmlHistory.initialize();
  
  // subscribe to DHTML history change
  // events
  dhtmlHistory.addListener(historyChange);
      
  // if this is the first time we have
  // loaded the page...
  if (dhtmlHistory.isFirstLoad()) {
    debug("Adding values to browser "
          + "history", false);
    // start adding history
    dhtmlHistory.add("helloworld", 
                     "Hello World Data");
    dhtmlHistory.add("foobar", 33);
    dhtmlHistory.add("boobah", true);
      
    var complexObject = new Object();
    complexObject.value1 = 
                  "This is the first value";
    complexObject.value2 = 
                  "This is the second data";
    complexObject.value3 = new Array();
    complexObject.value3[0] = "array 1";
    complexObject.value3[1] = "array 2";
      
    dhtmlHistory.add("complexObject", 
                     complexObject);

window.onload = initialize;
    
function initialize() {
  // initialize the DHTML History
  // framework
  dhtmlHistory.initialize();
  
  // subscribe to DHTML history change
  // events
  dhtmlHistory.addListener(historyChange);
      
  // if this is the first time we have
  // loaded the page...
  if (dhtmlHistory.isFirstLoad()) {
    debug("Adding values to browser "
          + "history", false);
    // start adding history
    dhtmlHistory.add("helloworld", 
                     "Hello World Data");
    dhtmlHistory.add("foobar", 33);
    dhtmlHistory.add("boobah", true);
      
    var complexObject = new Object();
    complexObject.value1 = 
                  "This is the first value";
    complexObject.value2 = 
                  "This is the second data";
    complexObject.value3 = new Array();
    complexObject.value3[0] = "array 1";
    complexObject.value3[1] = "array 2";
      
    dhtmlHistory.add("complexObject", 
                     complexObject);
                     
    // cache some values in the history
    // storage
    debug("Storing key 'fakeXML' into " 
          + "history storage", false);
    var fakeXML = 
      '<?xml version="1.0" '
      +      'encoding="ISO-8859-1"?>'
      +      '<foobar>'
      +         '<foo-entry/>'
      +      '</foobar>';
    historyStorage.put("fakeXML", fakeXML);
  } 

window.onload = initialize;
    
function initialize() {
  // initialize the DHTML History
  // framework
  dhtmlHistory.initialize();
  
  // subscribe to DHTML history change
  // events
  dhtmlHistory.addListener(historyChange);
      
  // if this is the first time we have
  // loaded the page...
  if (dhtmlHistory.isFirstLoad()) {
    debug("Adding values to browser "
          + "history", false);
    // start adding history
    dhtmlHistory.add("helloworld", 
                     "Hello World Data");
    dhtmlHistory.add("foobar", 33);
    dhtmlHistory.add("boobah", true);
      
    var complexObject = new Object();
    complexObject.value1 = 
                  "This is the first value";
    complexObject.value2 = 
                  "This is the second data";
    complexObject.value3 = new Array();
    complexObject.value3[0] = "array 1";
    complexObject.value3[1] = "array 2";
      
    dhtmlHistory.add("complexObject", 
                     complexObject);
                     
    // cache some values in the history
    // storage
    debug("Storing key 'fakeXML' into " 
          + "history storage", false);
    var fakeXML = 
      '<?xml version="1.0" '
      +      'encoding="ISO-8859-1"?>'
      +      '<foobar>'
      +         '<foo-entry/>'
      +      '</foobar>';
    historyStorage.put("fakeXML", fakeXML);
  } 
  
  // retrieve our values from the history
  // storage
  var savedXML = 
              historyStorage.get("fakeXML");
  savedXML = prettyPrintXml(savedXML);
  var hasKey = 
           historyStorage.hasKey("fakeXML");
  var message =
    "historyStorage.hasKey('fakeXML')="
    + hasKey + "<br>"
    + "historyStorage.get('fakeXML')=<br>"
    + savedXML;
  debug(message, false);
}

/** Our function that initializes when the page
    is finished loading. */
function initialize() {
   // initialize the DHTML History framework
   dhtmlHistory.initialize();
   
   // add ourselves as a DHTML History listener
   dhtmlHistory.addListener(handleHistoryChange);

   // if we haven't retrieved the address book
   // yet, grab it and then cache it into our
   // history storage
   if (window.addressBook == undefined) {
      // Store the address book as a global
      // object.
      // In a real application we would remotely
      // fetch this from a server in the
      // background.
      window.addressBook =
         ["Brad Neuberg 'bkn3@columbia.edu'",
          "John Doe 'johndoe@example.com'",
          "Deanna Neuberg 'mom@mom.com'"];
          
      // cache the address book so it exists
      // even if the user leaves the page and
      // then returns with the back button
      historyStorage.put("addressBook",
                         addressBook);
   }
   else {
      // fetch the cached address book from
      // the history storage
      window.addressBook = 
               historyStorage.get("addressBook");
   }

/** Handles history change events. */
function handleHistoryChange(newLocation, 
                             historyData) {
   // if there is no location then display
   // the default, which is the inbox
   if (newLocation == "") {
      newLocation = "section:inbox";
   }
   
   // extract the section to display from
   // the location change; newLocation will
   // begin with the word "section:" 
   newLocation = 
         newLocation.replace(/section\:/, "");
   
   // update the browser to respond to this
   // DHTML history change
   displayLocation(newLocation, historyData);
}

/** Displays the given location in the 
    right-hand side content area. */
function displayLocation(newLocation,
                         sectionData) {
   // get the menu element that was selected
   var selectedElement = 
            document.getElementById(newLocation);
            
   // clear out the old selected menu item
   var menu = document.getElementById("menu");
   for (var i = 0; i < menu.childNodes.length;
                                          i++) {
      var currentElement = menu.childNodes[i];
      // see if this is a DOM Element node
      if (currentElement.nodeType == 1) {
         // clear any class name
         currentElement.className = "";
      }                                       
   } 
   
   // cause the new selected menu item to
   // appear differently in the UI
   selectedElement.className = "selected";
   
   // display the new section in the right-hand
   // side of the screen; determine what 
   // our sectionData is
   
   // display the address book differently by
   // using our local address data we cached
   // earlier
   if (newLocation == "addressbook") {
      // format and display the address book
      sectionData = "<p>Your addressbook:</p>";
      sectionData += "<ul>";
      
      // fetch the address book from the cache
      // if we don't have it yet
      if (window.addressBook == undefined) {
         window.addressBook = 
               historyStorage.get("addressBook");
      }
      
      // format the address book for display
      for (var i = 0; 
               i < window.addressBook.length;
                     i++) {
         sectionData += "<li>"
                        + window.addressBook[i]
                        + "</li>";                  
      }
      
      sectionData += "</ul>";
   }
   
   // If there is no sectionData, then 
   // remotely retrieve it; in this example
   // we use fake data for everything but the
   // address book
   if (sectionData == null) {
      // in a real application we would remotely
      // fetch this section's content
      sectionData = "<p>This is section: " 
         + selectedElement.innerHTML + "</p>";  
   }
   
   // update the content's title and main text
   var contentTitle = 
         document.getElementById("content-title");
   var contentValue =
         document.getElementById("content-value");
   contentTitle.innerHTML = 
                        selectedElement.innerHTML;
   contentValue.innerHTML = sectionData;
}

时间：2005-11-03 作者：Mark Schiefelbein 浏览次数： 628 本文关键字：Ajax, RIA, Rich Internet Application, backbase, Dev Toolbox,  Eclipse,  WebLogic

文章工具  推荐给朋友  打印文章

　　动态HTML技术已经出现了多年。最近，Google的最新Web应用程序GMail、Google Suggests和Google Maps，在前端页面中重新引入了基于标准的DHTML开发模型。Google证明了，DHTML开发模型能够让开发人员创建具有可视化吸引力和高度交互 式的Rich Internet Application（丰富网络应用程序，RIA）。

　　Adaptive Path公司的Jesse James Garrett为这个基于标准的RIA开发模型创造了术语Ajax (Asynchronous JavaScript + XML)。与传统的基于页面的Web应用程序模型相比，Ajax有3点不同之处：

• 有一个客户端引擎担任用户界面（UI）和服务器之间的中介。
• 用户行为由客户端引擎处理，而不是生成发往服务器的页面请求。
• XML数据在客户端引擎和服务器之间传输。

　　换言之，Ajax解决方案包括一个客户端引擎，它用于呈现用户界面，并使用XML格式与服务器通信。这个引擎由很多JavaScript函数组成，位于Web浏览器中，它不需要插件，也不需要用户安装。

　　基于Ajax的RIA正在迅速成为Web应用程序前端的基准，因为它可以同时提供二者的优点：丰富性和可达性。Ajax应用程序和桌面应用程序 一样丰富，响应高度灵敏，并且可以在一个页面上提供所有数据，无需刷新页面。它们还拥有基于标准的浏览器应用程序的可达性特点，这类应用程序可以在不具备 浏览器插件或客户端applet的情况下进行部署。

　　Backbase所提供的Ajax软件具有以下特点：基于标准、功能全面且易于使用。Backbase Presentation Client (BPC)基于Ajax技术，它使用称为Backbase XML (BXML)的附加标签扩展了DHTML。Backbase XML Server Edition for J2EE (BXS)包含了一些服务器端的组件，利用这些组件，J2EE开发人员可以快速开发J2EE应用程序的Ajax前端。

　　在本文中，我使用Backbase为Java Pet Store开发了一个基于Ajax的前端。该案例分析说明了如何使用Backbase技术作为J2EE应用程序的Ajax表示层。您可以查看文中所描述的应用程序的在线演示，网址是http://www.backbase.com/xmlserver。

Backbase Ajax表示层

　　Web开发人员应该能够轻松创建具有以下特点的Rich Internet Application (RIA)：完全基于HTML标准（W3C），不需要最终用户安装插件，速度超快，能够在所有浏览器上进行操作，并与J2EE运行时和开发环境完全集成。 RIA利用客户端（Web浏览器）资源创建和管理用户界面，从而为最终用户提供一个响应灵敏而且具有应用程序风格的用户界面。

　　这种方法最近被称为Ajax。Ajax这个术语的灵感来源于Gmail、Google Maps和Google Suggests这类应用程序，它把现有的浏览器技术提高到了一个新的水平上。RIA从根本上改进了在线应用程序的可用性和有效性。Ajax RIA只使用标准的浏览器技术（如JavaScript、XHTML和XMLHttpRequest对象）就做到了这一点。通过使用 XMLHttpRequest，在将数据异步加载到界面中时就无需刷新页面。

　　Backbase在J2EE架构中提供一个Ajax表示层，它结合了目前的J2EE服务器和先进的富客户端技术的优点。Backbase表示层 控制了富用户界面的每个方面：与最终用户的交互模型，与后端系统的集成，以及整个客户端-服务器通信。Backbase直接提供了用于聚合来自任意位置的 XML的下一个范型，将数据绑定到先进的富用户界面控件，并在一个统一的富用户界面中交付组合应用程序。

　　Backbase表示层由一个客户机和一个服务器组成。Backbase Presentation Client (BPC)是一个基于Ajax的GUI引擎，它允许开发人员以声明性的方式快速构建RIA。Backbase XML(BXML)是对XHTML的扩展。它为开发人员提供了交付富前端功能的附加标签(B tag)。Backbase XML Server (BXS)提供一种XML流水线架构，利用它可以从Web服务、数据库或Java对象获取数据，可以聚合和转换这些数据，并将其绑定到BPC中的UI元 素。BPC和BXS相结合，可以在Web浏览器和应用服务器之间搭建一座功能强大的桥梁，并提供一个分布在客户端和服务器上的完整的富Internet表 示层。

　　图1说明了在逻辑和物理应用程序架构中，Backbase所处的位置。应用程序由一个J2EE后端和一个基于Ajax的RIA前端组成。从逻辑 上说，Backbase提供了表示层，而J2EE提供了业务逻辑和数据层。从物理上说，表示层分布在客户端和服务器上。在客户端上，Backbase使用 BPC扩展了浏览器。在服务器上，Backbase使用BXS扩展了应用服务器。

图1. Backbase富Internet表示层

Pet Store案例分析

　　我们将使用Java Pet Store作为案例来分析如何为J2EE应用程序添加Backbase RIA前端。Java Pet Store Demo是Sun Microsystems提供的一个示例应用程序，其目的是为了演示如何使用Java 2 Platform, Enterprise Edition(J2EE)构建Web应用程序（详情请参见http://java.sun.com/developer/releases/petstore）。

　　Java Pet Store是业内一个著名的参考应用程序（pet store还有.NET和Flash版本）。由于以下两个原因，它成为为J2EE应用程序添加基于Ajax的RIA前端的完美案例：

• Java Pet Store是一个完整的Web应用程序。

Sun设计Pet Store的目的是演示所有常见的Web应用程序功能。通过使用Pet Store作为案例，我可以说明为J2EE应用程序添加RIA层的所有方面。

作为一个典型的在线商店，它包含以下功能：

• 浏览产品类别。
• 在购物车中添加和删除物品。
• 填写订单表单。
• 提交订单。
• Java Pet Store有一个传统的HTML前端。

使用RIA前端的目的是提供更简单和响应更灵敏的GUI，以及通常更为丰富的Web用户体验。我将说明，如何通过Backbase RIA技术极大地改进应用程序的前端，同时无需对后端和总体系统需求做任何修改。

Pet Store的RIA前端将通过以下方式改善可用性：

• 把前端变为一个单页面的界面（SPI）。
• 提供更先进的UI控件（如模态弹出式菜单）。
• 使用可视化效果（例如，把宠物放入购物车）。
• 更加有效地利用电脑屏幕的操作区域。

RIA Pet Store前端

　　在这一节中，我将讨论经过改进的新Pet Store RIA前端。

　　下面的两个屏幕快照演示了前端的改进。要获得对Backbase RIA前端更直观的感受，请访问http://www.backbase.com/xmlserver上的在线演示，或者到http://www.backbase.com/download下载Backbase社区版本。

下面两个图对两个前端进行了可视化的比较。图2显示的是原来静态的多页面HTML前端。图3显示的是新的Backbase SPI前端：

图2. 原始HTML前端

图3. 新Backbase前端

　　Backbase为创建丰富的单页面Web界面提供了许多可能性。下面列出了一些Pet Store所使用的例子。

• 选项卡式的单页面浏览

在Web界面上，不同的动物种类（狗、猫等等）被表示为不同的选项卡。点击一个选项卡就会打开相应的类别，显示可供出售的宠物。

在Backbase SPI中，无需刷新页面就可以打开选项卡。BPC只从服务器请求所需的数据，然后更新客户端的视图。SPI机制可以极大地缩短响应时间，让客户随心所欲地在类别之间来回穿梭。

• 活动的多功能界面

界面有三个主要功能——类别浏览、购物车和页面引导历史记录，它们在界面上都是一直可见的。因此，购物者总是能够查看购物车的当前内容或最近看过的宠物的记录。

这些功能是高度同步的：浏览一个宠物时，历史记录将自动更新为在记录中显示该宠物。定购一个宠物时，它将被添加到购物车中。上述一切都发生在客户端的一个页面上（例如，无需重新加载页面就可以更新界面的各个部分）。

• 界面变化的流畅可视化效果

进行浏览时，客户将会看到不断变化的界面视图。例如，他可以按照价格和名称对宠物进行排序。界面需要根据新的排列顺序显示更新以后的宠物清单。

在Backbase RIA前端中，以前的视图被使用可视化效果的新视图所代替，新视图向最终用户显示什么正在改变。图4说明了如何通过流畅的定位效果，把按名称排列的顺序转变为按价格排列的顺序：



图4.类别视图的排列顺序转换

• 用于提高转换速度的信息栏验证

　　为了执行购买，购买者必须在一份表单中填入个人详细信息。Backbase极大地简化了这个购买过程，通过客户端的信息栏验证提供即时的反馈，并在提供所有数据的过程中提供逐步的指南和概述。

　　图5显示了在填写表单的第一个步骤中，对于e-mail地址信息栏的验证。当购买者填写下一栏时，就会提供即时的反馈。

图5. 信息栏验证—e-mail栏

Backbase RIA Pet Store的架构

　　增强Pet Store（或其他任何Web应用程序）的前端时，我们将继续依赖于以下两条架构基本原则：

• 最终用户仍然使用标准的Web浏览器访问Pet Store，无需添加任何插件。
• 由J2EE业务逻辑和数据组成的整个后端保持不变。

　　现有的后端在开发期间是完全孤立的，而且不会改变，这个事实对于架构师和IT管理人员十分有利。通过一个规整的、模块化的架构，他们将能够控制风险和成本，同时显著提高Web应用程序的用户友好性。

　　Backbase的富表示层技术由两个模块组成，它们将被加入到架构中。在客户端，BPC管理着SPI，并通过异步响应事件来处理与最终用户之 间的交互。在服务器端，Backbase XML Server这个灵活的XML管道可以连接到任意服务器端的数据源，包括Web服务、文件、数据库或本地Java对象。图6说明了BPC和BXS如何共同 为RIA提供一个声明式的、基于XML的端到端表示层。

图6. 声明式的端到端表示层

Backbase表示客户端

　　BPC是一个基于Ajax的GUI引擎，它运行在标准的Web浏览器中。运行时，BPC被加载到浏览器中，然后它会接收BXML代码，构造对应的B树，并不断地把这种表示转换为浏览器所呈现的DOM树。图7说明了运行时转换过程。

图7. BPC运行时

Backbase XML

　　Backbase XML (BXML)是XHTML的扩展。开发人员通过创建BXML应用程序来开发富前端，包括BXML标签、标准的XHTML和CSS。BXML是一种声明性语言，它包含了XHTML中所没有的标签（B标签）

　　BXML包含用于下列用途的标签：

• 定义屏幕分区(<b:panel>)
• 交互式客户端控制(<b:menu>)
• 处理标准的用户交互事件(onClick)
• 处理高级的用户交互事件(拖放和调整大小)
• 管理客户端状态
• 处理可视化效果(使修改任意CSS属性的过程动画化)
• 数据绑定
• 使用XSLT的一个子集进行客户端转换

用于J2EE的Backbase XML Server

　　Backbase XML Server (BXS)是一个服务器端的引擎，用于把BPC链接到任意J2EE后端。和BPC一样，BXS是完全基于XML的，其编程是声明性的。它使用一种XML管道架构，提供功能强大的服务器端转换和聚合。

　　BXS附带一些用于访问最常用的数据源（包括Web服务、数据库、文件系统和本地Java对象）的开箱即用任务。我们使用Backbase标签对从这些源获得的数据进行聚合，然后使用XSLT进行转换。结果以无格式XML数据或BXML表示代码的形式返回给BPC。

　　BXS还提供一些应用服务，包括身份验证、授权、日志记录和用户跟踪。图8显示了BXS的总体架构。

图8. BXS架构

Eclipse开发工具

　　为了让J2EE开发人员可以只使用一种开发工具就能创建完整的Web应用程序，包括富前端，Backbase提供了一个Eclipse插件。如图9所示，该插件提供了在Eclipse中突出显示语法和Backbase标签代码自动完成的功能。

图9. Backbase Eclipse插件

　　注意：Eclipse的可视化拖放开发插件还处在开发阶段。

部署到BEA WebLogic

　　BXS是一个与标准兼容的J2EE应用程序，可以将其部署到任何J2EE应用服务器上。图10显示了如何使用WebLogic控制台把BXS部署到BEA WebLogic Server。

图10. 把BXS部署到BEA WebLogic

实现Backbase RIA Pet Store

　　下面的顺序图包括更多详细信息，可以帮助您更好地理解如何实现Backbase pet store。该顺序图显示了在应用程序的初始化加载期间BPC与BXS之间的交互，如图11所示，它包括以下4个步骤：

• 初始化：用户在浏览器中输入宠物商店的URL；对BPC进行初始化。
• 应用程序布局：触发正在构造的事件；BPC构建整体应用程序布局；宠物类别被加载并显示在选项卡中。
• 默认数据：默认情况下加载狗的类别；最初显示8张狗的图片，并带有向前/向后和排序功能。

　　用户交互：用户点击Next按钮便可显示编号从9到16的狗图片。

图11.顺序图：富商店前端

• 初始化

从用户在浏览器中输入宠物商店的URL开始，这将导致从Web服务器请求一个索引页面。

索引页面包含用于实例化BPC的代码。索引页面是XHTML和BXML标签的结合，包含负责启动富前端的初始化事件处理程序。

BPC初始化代码：

<...><body onload="bpc.boot('/Backbase/')">

<...>

  <xmp b:backbase="true"

          style="display:none;height:100%;">

    <s:loading>

      <div style="position:absolute;width:20%;

                     top: 50px;left: 35%;">

        <center>Please wait while loading...

        </center>

      </div>

    </s:loading>

    <...>

    <!-- Include petshop specific behaviors -->

    <s:include b:url="petshop.xml"/>

• 应用程序布局

加载页面之后，BPC就会处理正在构造的事件，以便开始构建总体的应用程序布局。

应用程序布局由几个面板组成，它们将屏幕划分为几个部分。顶行有一个固定高度的宠物商店徽标，接下来的主行是实际的商店，大小可以调整。主行分为两列，左边一列是产品类别，右边一列是购物车和历史记录。

产品类别使用选项卡式的导航，每个宠物类别一个选项卡。这些选项卡是动态构造的，具体过程是通过BXS从一个XML文件加载类别，然后通过一个客户端模板把这些类别转换为选项卡，该转换模板的BPC代码如下：

<s:task b:action="transform"

    b:stylesheet="b:xml('categories')"

    b:xmldatasource="b:url('categories.xml')"

    b:destination="id('main-content')" 

    b:mode="aslastchild" />

下面是用于从文件系统把类别加载为XML的BXS代码：

<bsd:pipeline equals="categories.xml"

                                 access="public">

    <bsd:readxml input="file:/categories.xml"/>

</bsd:pipeline>

下面是用于创建选项卡式导航的BPC客户端模板：

<b:tabrow>

  <s:for-each b:select="categories/category">

    <b:tab>

      <s:attribute b:name="b:followstate">

        id('<s:value-of b:select="name"/>')

      </s:attribute>

      <s:value-of b:select="name"/>

    </b:tab>

  </s:for-each>

</b:tabrow>

所有BPC代码（用蓝色表示）都在客户端执行，而所有BXS代码（用红色表示）都在服务器端执行。注意，在本例中，我选择了在客户端进行转换，因为 数据集很小。下面我会给出一个在服务器端转换的例子。两种转换都要用到XSLT语法。Backbase的一个强大功能就是，前端开发人员可以根据情况选择 在客户端还是服务器端处理表示逻辑。语法似乎允许轻松地把代码从客户端移到服务器端，或者反之。

以上的代码示例应该可以使您了解到，借助于Backbase，Ajax编程变得多么轻松。结合了DHTML的声明性方法则更容易上手。使用附加的B 标签不仅可以使界面更加丰富，而且可以使开发人员的效率更高。诸如<b:tab>之类的单个标签可以代替多行HTML和JavaScript 代码，而且保证可以用于各种浏览器。

• 默认数据

显示商店前端时，默认情况下显示的是狗的类别。对于本案例，BXS负责此项操作。BXS从一个Web服务获得数据，将其放入缓存，然后生成BXML 表示代码，再把这些表示代码发回给BPC。服务器还通过一项配置设置确定一个页面上可以显示的动物数量，并根据需要加入了Next和Previous按 钮。最后，服务器还提供了按照名称或价格进行排序的功能。

下面的代码片断演示了服务器功能。外部管道products-overview.xml首先调用catalog.xml子管道。该子管道要么返回缓 存中的宠物信息，要么调用另一个子管道catalog.ws。在缓存没有命中的情况下，内部管道catalog.ws会从Web服务获取宠物信息。

外部管道获得宠物信息，然后进行XSLT转换，从而以4x2表格显示这些信息，并带有Next和Previouse按钮，然后把BXML格式的代码发回给BPC。BPC呈现它接收到的BXML。

有3个嵌套的BXS管道分别用于从Web服务获取数据、将其放入缓存，以及通过XSLT转换创建BXML输出：

<bsd:pipeline equals="products-overview.xml"

                              access="public"/>

  <bsd:callpipe pipe="catalog.xml"/>

<bsd:pipeline equals="catalog.xml" access="private">

  <bsd:exist field="{global:petstore-catalog}">

    <bsd:readxml>{global:petstore-catalog}

    </bsd:readxml>

    <bsd:otherwise>

      <bsd:callpipe pipe="catalog.ws"/>

<bsd:pipeline equals="catalog.ws"

                               access="private">

  <bsd:try>

    <bsd:callws wsdl="PetstoreCatalog.wsdl"

                               method="getAll"/>

    <bsd:callpipe pipe="strip-root-ns"/>

    <bsd:catch>

      <bsd:xslt xslt="error.xslt">

        <bsd:param name="errormsg">{error:message}

        </bsd:param>

        <bsd:param name="errorsrc">{error:source}

        </bsd:param>

      </bsd:xslt>

    </bsd:catch>

  </bsd:try>

</bsd:pipeline>
      <bsd:writexml>{global:petstore-catalog}

      </bsd:writexml>

    </bsd:otherwise>

  </bsd:exist>

</bsd:pipeline>
<bsd:extractfilter xpath=

  "category[name/text()='{requestparam:category}']"/> 

  <bsd:xslt xslt="products/products-overview.xslt">

    <bsd:param name="category">

      {requestparam:category}

    </bsd:param>

    <bsd:param name="stepsize">

      {global:stepsize}

    </bsd:param>

    <bsd:param name="sortorder">

      {requestparam:sortorder}

    </bsd:param>

    <bsd:param name="sortfield">

      {requestparam:sortfield}

    </bsd:param>

  </bsd:xslt>

</bsd:pipeline>

代码示例再次清楚地说明了，借助于Backbase，以声明性的方式创建Ajax前端是多么容易的事情。例如，只要使用带有一个WSDL引用作为属性的<bsd:callws>标签，就可以调用一个Web服务。

• 用户交互

现在，最终用户可以与宠物商店类别进行交互。可以使用Next或Previous按钮或者排序功能在动物类别中进行浏览。或者，只要点击一下相应的选项卡，就可以转到另一个类别中。

BPC和BXS对这种交互进行了无缝处理。显示已经在客户端上的数据时，无需与服务器进行任何通信。例如，购物者已经从狗类别转到了猫类别，然后再 回到狗类别。客户端仍然拥有狗类别的数据，所以可以马上显示出来，这使得购物体验变得更完美。其他的类别需要从BXS获取。BXS要么立即从其缓存返回它 们，要们访问Web服务来获得新数据。

　　为了详细说明Backbase Ajax宠物商店的实现，我把重点放在了初始化的步骤上。完整的宠物商店（可以从http://www.backbase.com/xmlserver下载）还包括以下功能：

• 商店前端
• 初始化。
• 使用从文件加载的宠物类别创建选项卡。
• 默认情况下从Web服务加载Dog选项卡。
• 通过缓存浏览Dog并对其进行排序。
• 宠物详细情况
• 使用跟踪聚合来自缓存和数据库的宠物详细情况。
• 创建可视化历史记录。
• 购物车
• 使用跟踪添加到购物车。
• 登录
• 登录和身份验证。
• 退出
• 退出和授权。
• 确认。

结束语

　　最近有很多人都在研究Ajax。Ajax的优点已经在实践中得到了证明。定制Ajax的缺点在于它的复杂性和不兼容性。大量客户端 JavaScript的出现意味着开发人员很可能陷入到浏览器实现差别的泥潭中去。另外，JavaScript这种语言不适用于复杂的应用程序。

　　为了开发易于管理的、可伸缩的和适应未来变化的Ajax解决方案，开发人员所需使用的工具应该具有比定制部件开发更多的功能。Backbase Ajax软件提供了一个功能全面的客户端GUI管理引擎(Backbase Presentation Client)、一个灵活的服务器端XML管道(Backbase XML Server)和一种声明性的基于标签的UI语言，BXML(Backbase eXtensible Markup Language)。该方法具有几个优点。

　　首先，Backbae易于使用。它的声明性语言水平地扩展了DHTML；它完全对开发人员隐藏了浏览器兼容性的问题；而且它带有一套开发和调试工具。

　　其次，Backbase是一个功能全面的Ajax GUI管理系统。Backbase的先进性大大超过了其他Ajax框架，它完全把重点放在提供一个部件库或客户端－服务器通信（如DWR）上。在控件和客 户端－服务器通信的基础上，Backbase提供了用于如下用途的标签：提供电影效果，随需应变的数据加载，数据绑定和客户端的数据转换，对于Back和 Forward按钮的支持，完善的GUI状态管理，等等。所有这些功能对于目前的Ajax Web应用程序来说都是必需的。

　　最后，Backbase是以兼容的方式提供所有客户端和服务器端的功能。用户可以使用富Ajax前端扩展现有的应用程序，同时无需修改后端。对于整个表示层来说，它的架构是时新的、模块化的，而且它基于XML。

参考资料

• Java Pet Store Demo。
• Ajax: A New Approach to Web Applications，作者Jesse James Garrett（Adaptive Path，2005年2月）。

原文出处

A Backbase Ajax Front-end for J2EE Applications

http://dev2dev.bea.com/pub/a/2005/08/backbase_ajax.html

有网友反映说《AJAX开发简略》配文代码不全。其实应该是全的，只是要把包括框架和两个示例的程序都整合起来看。这里把全部的代码贴出来，需要的朋友可以看看。
sample1_1.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
 var http_request = false;
 function send_request(url) {//初始化、指定处理函数、发送请求的函数
  http_request = false;
  //开始初始化XMLHttpRequest对象
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   http_request = new XMLHttpRequest();
   if (http_request.overrideMimeType) {//设置MiME类别
    http_request.overrideMimeType('text/xml');
   }
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
  if (!http_request) { // 异常，创建对象实例失败
   window.alert("不能创建XMLHttpRequest对象实例.");
   return false;
  }
  http_request.onreadystatechange = processRequest;
  // 确定发送请求的方式和URL以及是否同步执行下段代码
  http_request.open("GET", url, true);
  http_request.send(null);
 }
 // 处理返回信息的函数
    function processRequest() {
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
                alert(http_request.responseText);
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
 function userCheck() {
  var f = document.form1;
  var username = f.username.value;
  if(username=="") {
   window.alert("用户名不能为空。");
   f.username.focus();
   return false;
  }
  else {
   send_request('sample1_2.jsp?username='+username);
  }
 }
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<form name="form1" action="" method="post">
用户名：<input type="text" name="username" value="">&nbsp;
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>
<!--span style="cursor: pointer; text-decoration: underline" onclick="send_request('2.jsp?username=educhina')">Send a request</span-->
</body>
</html>

sample1_2.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos)) out.print("用户名已经被注册，请更换一个用户名。");
else out.print("用户名尚未被使用，您可以继续。");
%>

sample2_1.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
 var http_request = false;
 var currentPos = null;
 function send_request(url) {//初始化、指定处理函数、发送请求的函数
  http_request = false;
  //开始初始化XMLHttpRequest对象
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   http_request = new XMLHttpRequest();
   if (http_request.overrideMimeType) {//设置MiME类别
    http_request.overrideMimeType('text/xml');
   }
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
  if (!http_request) { // 异常，创建对象实例失败
   window.alert("不能创建XMLHttpRequest对象实例.");
   return false;
  }
  http_request.onreadystatechange = processRequest;
  // 确定发送请求的方式和URL以及是否同步执行下段代码
  http_request.open("GET", url, true);
  http_request.send(null);
 }
 // 处理返回信息的函数
    function processRequest() {
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
                //alert(http_request.responseText);
    document.getElementById(currentPos).innerHTML = http_request.responseText;
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
 //显示部门下的岗位
 function showRoles(obj) {
  document.getElementById(obj).parentNode.style.display = "";
  document.getElementById(obj).innerHTML = "正在读取数据..."
  currentPos = obj;
  send_request("sample2_2.jsp?playPos="+obj);
 }
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="20"><a href="javascript:void(0)" onClick="showRoles('pos_1')">经理室</a></td>
    </tr>
    <tr style="display:none">
        <td height="20" id="pos_1">&nbsp;</td>
    </tr>
    <tr>
        <td height="20"><a href="javascript:void(0)" onClick="showRoles('pos_2')">开发部</a></td>
    </tr>
    <tr style="display:none ">
        <td id="pos_2" height="20">&nbsp;</td>
    </tr>
</table>
<!--a href="javascript:void(0)" onClick="showRoles('pos_1')">测试</a-->
<!--span style="cursor: pointer; text-decoration: underline" onclick="send_request('2.jsp?username=educhina')">Send a request</span-->
</body>
</html>

sample2_2.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos)) out.print("&nbsp;&nbsp;总经理<br>&nbsp;&nbsp;副总经理");
else if("pos_2".equals(playPos)) out.println("&nbsp;&nbsp;总工程师<br>&nbsp;&nbsp;软件工程师");
%>

时间：2005-11-01 作者：David Teare 浏览次数： 1786 本文关键字：ajax, dhtml, dwr,  javascript

文章工具  推荐给朋友  打印文章

　　作为J2EE开发人员，我们似乎经常关注“后端机制（backend mechanics）”。我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其 易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。遗憾的是，在过去几年中，我们在后端投入了太多的时间，而在使我们的Web用户界面对用户自然 和响应灵敏方面却投入不足。

　　本文介绍一种方法，Ajax，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、 DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单：利用一个Ajax框架（指DWR）构造一个应用程序，它直接从浏览器与后端服 务进行通信。如果使用得当，这种强大的力量可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。

　　该应用程序中所使用的示例代码已打包为单独的WAR文件，可供下载。

简介

　　术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范 例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在 用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用 JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应 的。

　　虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人 心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。

　　通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：

• BackPack
• Google Suggest
• Google Maps
• PalmSphere

　　所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。

定义Ajax

　　Adaptive Path公司的Jesse James Garrett这样定义Ajax：

　　Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

• 基于XHTML和CSS标准的表示；
• 使用Document Object Model进行动态显示和交互；
• 使用XMLHttpRequest与服务器进行异步通信；
• 使用JavaScript绑定一切。

　　这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。

Ajax的工作原理

　　Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不 阻塞用户。

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

• 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
• 提升站点的性 能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载 32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
• 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
• 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

Ajax可用于那些场景？——一个例子：MSN Money页面

　　前几天，在浏览MSN Money页面的时候，有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”（评价本文）功能，鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后，整个页面被刷新，在原来投票问题所在的地方出现了一个漂亮的感谢画面。

　　而Ajax能够使用户的体验更加愉快，它可以提供响应更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由于要刷新整个页面，需要传送大量的 数据，因为必须重新发送整个页面。如果使用Ajax，服务器可以返回一个包含了感谢信息的500字节的消息，而不是发送26,813字节的消息来刷新整个 页面。即使使用的是高速Internet，传送26K和1/2K的差别也非常大。同样重要的是，只需要刷新与投票相关的一小节，而不是刷新整个屏幕。

　　让我们利用Ajax实现自己的基本投票系统。

原始的Ajax：直接使用XmlHttpRequest

　　如上所述，Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识：http://tearesolutions.com/ajax-demo/raw-ajax.html。注：如果您已经在本地WebLogic容器中安装了ajax-demo.war，可以导航到http://localhost:7001/ajax-demo/raw-ajax.html，

　　浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。

function castVote(rank) {
  var url = "/ajax-demo/static-article-ranking.html";
  var callback = processAjaxResponse;
  executeXhr(callback, url);
}

　　该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响 应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。

function executeXhr(callback, url) {
  // branch for native XMLHttpRequest object
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = callback;
    req.open("GET", url, true);
    req.send(null);
  } // branch for IE/Windows ActiveX version
  else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    if (req) {
      req.onreadystatechange = callback;
      req.open("GET", url, true);
      req.send();
    }
  }
}

　　如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏 览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，这样就要使用所提供的ActiveX实现。

executeXhr()方法中最关键的部分是这两行：

req.onreadystatechange = callback;
req.open("GET", url, true);

　　第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。

function processAjaxResponse() {
  // only if req shows "loaded"
  if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
      502 502'votes').innerHTML = req.responseText;
    } else {
      alert("There was a problem retrieving the XML data:
" +
      req.statusText);
    }
  }
} 

　　该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列举了常用的XmlHttpRequest对象属性。

　　现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成 （readyStatus == 4），然后根据服务器的设定询问请求状态。如果一切正常（status == 200）,就使用innerHTML属性重写DOM的“votes”节点的内容。

　　既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。

Ajax: DWR方式

　　按照与文章评价系统相同的流程，我们将使用Direct Web Remoting（DWR）框架实现同样的功能。

　　假定文章和投票结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单，我们不会使用数据库进行持久性 存储。此外，为使应用程序尽可能通用，也不使用Web框架。相反，应用程序将从一个静态HTML文件开始，可以认为它由服务器动态地呈现。除了这些简化措 施，应用程序还应该使用Spring Framework关联一切，以便轻松看出如何在一个“真实的”应用程序中使用DWR。

　　现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件，因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后，就可以导航到http://localhost:7001/ajax_demo/dwr-ajax.html来运行程序。

　　可以查看HTML 源代码，了解它如何工作。给人印象最深的是，代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是，ajaxSampleSvc服务不是由手工编写而是完全自动生成的！让我们继续，看看这是如何做到的。

引入DWR

　　如同在“原始的Ajax”一节所演示的那样，直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。

　　设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中， 以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。

　　DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象 来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐 碎细节。

　　让我们仔细分析一下示例代码，弄清它是如何工作的。

应用程序细节：DWR分析

　　关于应用程序，首先要注意的是，它是一个标准的Java应用程序，使用分层架构（Layered Architecture）设计模式。使用DWR通过JavaScript公开一些服务并不影响您的设计。

　　下面是一个简单的Java服务，我们将使用DWR框架直接将其向JavaScript代码公开：

package com.tearesolutions.service;

public interface AjaxSampleSvc { 
  Article castVote(int rank);
}

　　这是一个被简化到几乎不可能的程度的例子，其中只有一篇文章可以投票。该服务由Spring管理，它使用的bean名是ajaxSampleSvc，它的持久性需求则依赖于ArticleDao。详情请参见applicationContext.xml。

　　为了把该服务公开为JavaScript对象，需要配置DWR，添加dwr.xml文件到WEB-INF目录下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
 "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN"
 "http://www.getahead.ltd.uk/dwr/dwr.dtd">
	
<dwr>
 <allow>
  <create creator="spring" javascript="ajaxSampleSvc">
   <param name="beanName" value="ajaxSampleSvc" />
  </create>
  <convert converter="bean" match="com.tearesolutions.model.Article"/>
  <exclude method="toString"/>
  <exclude method="setArticleDao"/>
 </allow>
</dwr>

　　dwr.xml文件告诉DWR哪些服务是要直接向JavaScript代码公开的。注意，已经要求公开Spring bean ajaxSampleSvc。DWR将自动找到由应用程序设置的SpringApplicationContext。为此，必须使用标准的servlet 过滤器ContextLoaderListener来初始化Spring ApplicationContext。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD 
 Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
 <display-name>Ajax Examples</display-name>

 <listener>
  <listener-class>
      org.springframework.web.context.ContextLoaderListener
  </listener-class>
 </listener>
	
 <servlet>
  <servlet-name>ajax_sample</servlet-name>
  <servlet-class>com.tearesolutions.web.AjaxSampleServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>

 <servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <display-name>DWR Servlet</display-name>
  <description>Direct Web Remoter Servlet</description>
  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
  <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
 </servlet>

 <servlet-mapping>
  <servlet-name>ajax_sample</servlet-name>
  <url-pattern>/ajax_sample</url-pattern>
 </servlet-mapping>

 <servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>
</web-app>

　　做完这些之后，可以加载http://localhost:7001/ajax-demo/dwr，看看哪些服务可用。结果如下：

图3. 可用的服务

<script type='text/javascript' 
   src='/ajax-demo/dwr/interface/ajaxSampleSvc.js'></script>
<script type='text/javascript' 
   src='/ajax-demo/dwr/engine.js'></script>

ajaxSampleSvc.js是动态生成的：

function ajaxSampleSvc() { }

ajaxSampleSvc.castVote = function(callback, p0)
{ 
  DWREngine._execute(callback, '/ajax-demo/dwr', 
 'ajaxSampleSvc', 'castVote', p0);
}

　　现在可以使用JavaScript对象ajaxSampleSvc替换所有的XmlHttpRequest代码，从而重构raw-ajax.html文件。可以在dwr-ajax.html文件中看到改动的结果；下面是新的JavaScript函数：

function castVote(rank) {
  ajaxSampleSvc.castVote(processResponse, rank);
}
function processResponse(data) {
 var voteText = "
Thanks for Voting!
"
    + "
Current ranking: " + data.voteAverage 
    + " out of 5
" 
    + "
Number of votes placed: " 
    + data.numberOfVotes + "
";
 502 502'votes').innerHTML = voteText;       
}

　　惊人地简单，不是吗？由ajaxSampleSvc对象返回的Article域对象序列化为一个JavaScript对象，允许在它上面调用诸 如numberOfVotes()和voteAverage()之类的方法。在动态生成并插入到DIV元素“votes”中的HTML代码内使用这些数 据。

下一步工作

　　　在后续文章中，我将继续有关Ajax的话题，涉及下面这些方面：

• Ajax最佳实践

　　像许多技术一样，Ajax是一把双刃剑。对于一些用例，其应用程序其实没有必要使用Ajax，使用了反而有损可用性。我将介绍一些不适合使用的模式，突出说明Ajax的一些消极方面，并展示一些有助于缓和这些消极方面的机制。例如，对Netflix电影浏览器来说，Ajax是合适的解决方案吗？或者，如何提示用户确实出了一些问题，而再次单击按钮也无济于事？

• 管理跨请求的状态

　　在使用Ajax时，最初的文档DOM会发生一些变化，并且有大量的页面状态信息存储在客户端变量中。当用户跟踪一个链接到应用程序中的另一个页面时，状态就丢失了。当用户按照惯例单击Back按钮时，呈现给他们的是缓存中的初始页面。这会使用户感到非常迷惑！

• 调试技巧

　　使用JavaScript在客户端执行更多的工作时，如果事情不按预期方式进行，就需要一些调试工具来帮助弄清出现了什么问题。

结束语

　　本文介绍了Ajax方法，并展示了如何使用它来创建一个动态且响应灵敏的Web应用程序。通过使用DWR框架，可以轻松地把Ajax融合到站点中，而无需担心所有必须执行的实际管道工作。

　　特别感谢Getahead IT咨询公司的Joe Walker和他的团队开发出DWR这样神奇的工具。感谢你们与世界共享它！

下载

　　本文中演示的应用程序源代码可供下载：ajax-demo.war（1.52 MB）。

参考资料

• http://www.getahead.ltd.uk/dwr——Getahead IT咨询公司。
• Jesse James Garrett所撰写的“Ajax: A New Approach to Web Applications”（Adaptive Path，2005年二月）。
• “Dynamic HTML and XML: The XMLHttpRequest Object”（Apple Developer Connection）。

原文出处

An Introduction To Ajax

http://dev2dev.bea.com/pub/a/2005/08/ajax_introduction.html