亚洲成人福利在线观看,亚洲av日韩av无码,亚洲一级视频在线观看

【�{载】用AJAX来控制书�{�֒�回退按钮

Dion — Fri, 25 Nov 2005 02:33:00 GMT

作者：Brad Neuberg
译�?boool

版权声明�Q��Q何获得Matrix授权的网站，转蝲时请务必以超链接形式标明文章原始出处和作者信息及本声�?/span>
作�?Brad Neuberg;boool
原文地址:http://www.onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html
中文地址:http://www.matrix.org.cn/resource/article/43/43972_AJAX.html
关键词： ajax;bookmarks;back button

�q�篇文章描述了一个支持AJAX应用书签和回退按钮的开源的javascript库。在�q�个指南的最后，开发者将会得��Z��个甚至不�?span style="color: Green;">Google Maps 或�?Gmail那样处理的AJAX的解��x��案：健壮的，可用的书�{�֒�向前向后的动作能够象其他的web��面一��h��的工作�?br>
AJAX�Q�怎样��L��制书�{�֒�回退按钮 �q�篇文章说明了一个重要的成果�Q�AJAX应用目前面对着书签和回退按钮的应用，描述了非常简单的历史库（Really Simple History�Q�，一个开源的解决�q�类问题的框�Ӟ��q�提供了一些能够运行的例子�?br>
�q? ��文章描�q�的主要问题是双重的�Q�一是一个隐藏的html 表单被用作一个大而短生命周期的客��L��信息的session�~�存�Q�这个缓存对在这个页面上前进回退是强壮的。二是一个锚�q�接和隐藏的iframes的组�? 用来截取和记录浏览器的历史事�Ӟ��来实现前�q�和回退的按钮。这两个技术都被用一个简单的javascript库来��装�Q�以利于开发者的使用�?br>
存在的问�?/span>
书签和回退按钮在传�l�的多页面的web应用上能��利的运行。当用户在网站上冲浪�Ӟ��他们的浏览器地址栏能更新URL,�q�些URL可以被粘贴到的email或者添加到书签以备以后的��用。回退和前�q�按钮也可以正常�q�行�Q�这可以使用户在他们讉K��的页面间�U�d��?br>
AJAX应用是与众不同的�Q�然而，他也是在单一web��面上成熟的�E�序。浏览器不是为AJAX而做的—AJAX他捕莯��ȝ��事�g�Q�当web应用在每个鼠标点��L��h��面�?br>
在象Gmail那样的AJAX软�g里，��览器的地址栏正��的停留��p��用户在选择和改变应用的状态时�Q�这使得作书�{�ֈ�特定的应用视��N��变得不可能。此外，如果用户按下了他们的回退按钮去返回上一个操作，他们会惊奇的发现��览器将完全��d��原来他所在的应用的web��面�?br>
解决�Ҏ��
开源的Really Simply History(RSH)框架解决了这些问题，他带来了AJAX应用的作书签和控制前�q�后退按钮的功能。RSH目前�q�是beta版，�? Firefox1.0上，Netscape7及以�?和IE6及以上运行。Safari现在�q�不支持�Q�要得到更详�l�的说明�Q�请看我的weblog中的文章Coding in Paradise: Safari: No DHTML History Possible).

目前存在的几个AJAX框架可以帮助我们做书�{�֒�发布历史�Q�然而所有的框架都因��Z��们的实现而被几个重要的bug困扰�Q�请�?a target="_new">Coding in Paradise: AJAX History Libraries 得知详情�Q�。此外，许多AJAX历史框架集成�l�定到较大的库上�Q�比如Backbase �?Dojo�Q�这些框架提供了与传�l�AJAX应用不同的编�E�模型，��开发者去采用一整套全新的方式去获得��览器的历史相关的功能�?br>
相应的，RSH是一个简单的模型�Q�能被包含在已经存在的AJAX�pȝ��中。而且�Q�Really Simple History库��用了一些技巧去避免影响到其他历史框架的bug.

Really Simple History框架�?个javascript�c�d��l�成�Q�分别叫DhtmlHistory �?HistoryStorage.

DhtmlHistory �c�L��供了一个对AJAX应用提取历史的功能�?AJAX��面add() 历史事�g到浏览器里，指定新的地址和关联历史数据。DhtmlHistory �cȝ��一个锚的hash表更新浏览器现在的URL�Q�比�?new-location �Q�然后用�q�个新的URL兌��历史数据。AJAX应用注册他们自己到历史监听器里，然后当用��L��前进和后退按钮��D��的时候，历史事�g被激发，提供�l�浏览器�? 的地址和调用add()持箋保留数据�?br>
�W�二个类HistoryStorage�Q�允许开发者存储�Q意大��的历史数据。一般的��面�Q�当一个用户导航到一个新的网站，��览器会卸蝲和清除所有这个页面的应用和javascript状态信息。如果用��L��回退按钮�q�回�q�来了，所有的数据已经丢失了�? HistoryStorage �c�解决了�q�个问题�Q�他有一个api 包含��单的hashtable�Ҏ��比如put(),get(),hasKey()。这些方法允许开发者在��d��web��面时存储�Q意大��的数据�Q�当用户点了回退按钮�q�回�Ӟ��数据可以通过HistoryStorage �c�被讉K��。我们通过一个隐藏的表单域（a hidden form field�Q�，利用��览器即使在用户��d��web��面也会自动保存表单域值的�q�个�Ҏ��，完成�q�个功能�?br>
让我们立卌��入一个简单的例子吧�?br>
�C�Z��1
首先�Q��Q何一个想使用Really Simple History框架的页面必��d��含（include�Q�dhtmlHistory.js 脚本�?br>

DHTML History 应用也必��d��和AJAX web��面相同的目录下包含一个叫blank.html 的指定文�Ӟ��q�个文�g被Really Simple History框架�l�定而且对IE来说是必需的。另一斚w��Q�RSH使用一个hidden iframe 来追�t�和加入IE历史的改变，��Z��正确的执行功能，�q�个iframe需要指向一个真正的地址�Q�不需要blank.html�?br>
RSH框架创徏了一个叫dhtmlHistory 的全局对象�Q�作为操作浏览器历史的入口。��用dhtmlHistory 的第一步需要在��面加蝲后初始化�q�个对象�?br>

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

然后�Q�开发者��用dhtmlHistory.addListener()�Ҏ��去订阅历史改变事件。这个方法获取一个javascript回调�Ҏ��Q�当一个DHTML历史改变事�g发生时他��收�?个自变量�Q�新的页面地址�Q�和��M��可选的而且可以被关联到�q�个事�g的历史数据�?br>

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

historyChange()�Ҏ��是简单易懂得�Q�它是由一个用户导航到一个新地址后收到的新地址�Q�newLocation�Q�和一个关联到事�g的可选的历史数据historyData 构成的�?br>

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

上面用到的debug()�Ҏ��是例子代码中定义的一个工具函敎ͼ�在完整的下蝲例子里有。debug()�Ҏ��单的在web��面上打一条消息，�W?个Boolean变量�Q�在代码里是true,控制一个新的debug消息打印前是否要清除以前存在的所有消息�?br>
一个开发者��用add()�Ҏ��加入历史事�g。加入一个历史事件包括根据历史的改变指定一个新的地址�Q�就�?edit:SomePage"标记, �q�提供一个事件发生时可选的会被存储到历史数据historyData�?

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);

在add ()�Ҏ��被调用后�Q�新地址立刻被作��Z��个锚值显�C�在用户的浏览器的URL栏里。例如，一个AJAX web��面停留在http://codinginparadise.org/my_ajax_app�Q�调用了dhtmlHistory.add ("helloworld", "Hello World Data" 后，用户��在��览器的URL栏里看到下面的地址
http://codinginparadise.org/my_ajax_app#helloworld

�? 后他们可以把�q�个��面做成书签�Q�如果他们��用这个书�{�，你的AJAX应用可以��d��#helloworld值然后��用她��d��始化web��面。Hash里的�? 址��D��Really Simple History  框架昑ּ�的编码和解码�Q�URL encoded and decoded�Q? �Q�这是�ؓ了解军_��W�的�~�码问题�Q?br>
对当AJAX地址改变时保存更多的复杂的状态来��_��historyData  比一个更�Ҏ��的匹配一�? URL的东西更有用。他是一个可选的��|��可以是�Q何javascript�c�d��Q�比如Number, String, 或�?Object �c�d��。有一个例子是用这个在一个多文本�~�辑器（rich text editor�Q�保存所有的文本�Q�例如，如果用户从这个页面漂�U�（或者说从这个页面导航到其他��面�Q�离开了这个页面）走。当一个用户再回到�q�个地址�Q�浏览器会把�q�个对象�q�回�l�历史改变侦听器�Q�history change listener�Q��?br>
开发者可以提供一个完全的 historyData 的javascript对象�Q�用嵌套的对象objects和排列arrays来描�l�复杂的状态。只要是JSON (JavaScript Object Notation)  允许的那么在历史数据里就是允许的�Q�包括简单数据类型和null型。DOM的对象和可编�E�的��览器对象比�? XMLHttpRequest �Q�不会被保存。注意historyData 不会被书�{�持久化�Q�如果浏览器��x��Q�或者浏览器的缓存被清空�Q�或者用��h��除历史的时候，会消失掉�?br>
使用dhtmlHistory 最后一步，是isFirstLoad() �Ҏ��。如果你��D��C��个web��面�Q�再跛_��一个不同的��面�Q�然后按下回退按钮�q�回起始的网站，�W�一��将完全重新装蝲�Q��ƈ�Ȁ发onload事�g。这栯��产生破坏性，当代码在�W�一�ơ装载时惌��用某�U�方式初始化��面的时候，不会再刷新页面。isFirstLoad() �Ҏ��让区别是最开始第一�ơ装载页面，�q�是相对的，在用户导航回��C��自己的浏览器历史中记录的�|�页时激发load事�g�Q�成为可能�?br>
在例子代码中�Q�我们只惛_��W�一�ơ页面装载的时候加入历史事�Ӟ��如果用户在第一�ơ装载后�Q�按回退按钮�q�回��面�Q�我们就不想重新加入��M��历史事�g�?br>

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);

�? 我们�l�箋使用historyStorage �c�R��类似dhtmlHistory �Q�historyStorage通过一个叫historyStorage的单一全局对象来显�C�Z��的功能，�q�个对象有几个方法来伪装成一个hash table, 象put(keyName, keyValue), get(keyName), and hasKey(keyName).键名必须是字�W�，同时键值可以是复杂的javascript对象或者甚��x��xml格式的字�W�。在我们源码source code的例子中�Q�我们put() ��单的XML 到historyStorage 在页面第一�ơ装载时�?br>

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 = 
      '      +      'encoding="ISO-8859-1"?>'
      +      ''
      +         ''
      +      '';
    historyStorage.put("fakeXML", fakeXML);
  }

然后�Q�如果用户从�q�个��面漂移赎ͼ��D��赎ͼ�又通过�q�回按钮�q�回了，我们可以用get�Q�）提出我们存储的值或者用haskey�Q�）��查他是否存在�?br>

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 = 
      '      +      'encoding="ISO-8859-1"?>'
      +      ''
      +         ''
      +      '';
    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 + "
"
    + "historyStorage.get('fakeXML')=
"
    + savedXML;
  debug(message, false);
}

prettyPrintXml() 是一个第一在例子源码full example source code中的工具�Ҏ��。这个方法准备简单的xml昄��在web page �Q�方便调试�?br>
�? 意数据只是在使用��面的历史时被持久化�Q�如果浏览器关闭了，或者用��h��开一个新的窗口又再次键入了ajax应用的地址�Q�历史数据对�q�些新的web��面是不可用的。历史数据只有在用前�q�或回退按钮时才被持久化�Q�而且在用户关闭浏览器或清�I�缓存的时候会消失掉。想真正的长旉��的持久化�Q�请看Ajax MAssive Storage System (AMASS).
我们的简单示例已�l�完成。演�C�Z��Q�Demo it�Q�或者下载全部的源代码（download the full source code.�Q?br>
�C�Z��2
�? 们的�W?个例子是一个简单的模拟ajax email 应用的示例，叫O'Reilly Mail,�c�M��Gmail. O'Reilly Mail描述了怎样使用dhtmlHistory�c�d��控制��览器的历史�Q�和怎样使用historyStorage对象�ȝ��存历史数据�?br>
O'Reilly Mail 用户接口�Q�user interface�Q�有两部分。在��面的左�Ҏ��一个有不同email文�g夹和选项的菜单，例如收�g��，草稿�Q�等�{�。当一个用户选择了一个菜单项�Q�比如收件箱�Q�我们用�q�个菜单��的内容更新双��的页面。在一个实际应用中�Q�我们会�q�程取得和显�C�选择的信 ��内容，不过在O'Reilly Mail里，我们��单的昄��选择的选项�?br>
O'Reilly Mail使用Really Simple History 框架向浏览器历史里加入菜单变化和更新地址栏，允许用户利用��览器的回退和前�q�按钮对应用做书�{�֒�跛_��上一个变化的菜单�?br>
�? 们加入一个特别的菜单��，地址��，来描�l�historyStorage 能够怎样被��用。地址��是一个由联系的名字电子邮件和地址�l�成的javascript数组�Q�在一个真实的应用里我们会取得他从一个远�E�的服务器。不�q�，�? O'Reilly Mail里，我们在本地创��个数�l�，加入几个名字电子邮�g和地址�Q�然后把他们存储在historyStorage 对象里。如果用��L��开了这个web��面以后又返回的话，O'Reilly Mail应用重新从缓存里得到地址��，胜过�Q�不得不�Q�再�ơ访问远�E�服务器�?br>
地址��是在我们的初始化initialize()�Ҏ��里存储和重新取得�?br>

/** 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");
   }

�? 理历史变化的代码是简单的。在下面的代码中�Q�当用户不论按下回退�q�是前进按钮handleHistoryChange 都被调用。我们得到新的地址�Q�newLocation�Q? 使用他更新我们的用户接口来改变状态，通过使用一个叫displayLocation的O'Reilly Mail的工��h��法�?br>

/** 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 = "Your addressbook:
";
      sectionData += "";
      
      // 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 += ""
                        + window.addressBook[i]
                        + "
";                  
      }
      
      sectionData += "
";
   }
   
   // 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 = "This is section: " 
         + selectedElement.innerHTML + "
";  
   }
   
   // 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;
}

演示�Q�Demo�Q�O'Reilly Mail或者下载（download�Q�O'Reilly Mail的源代码�?br>
�l�束�?/span>
你现在已�l�学习了使用Really Simple History API 让你的AJAX应用响应书签和前�q�回退按钮�Q�而且有代码可以作为创��Z��自己的应用的素材。我热切地期待你利用书签和历史的支持完成你的AJAX创造�?br>
资源
·onjava.com:onjava.com
·Matrix-Java开发者社�?http://www.matrix.org.cn/
·Download all sample code for this article.
·Download the Really Simple History framework.
·Demo O'Reilly Mail or download the O'Reilly Mail source code. The full example download also includes more examples for you to play with.
·Coding in Paradise: The author's weblog, covering AJAX, DHTML, and Java techniques and new developments in collaborative technologies, such as WikiWikis.

感谢
特别的要感谢每个��阅这��文章的the Really Simple History框架的�h�Q?br> Michael Eakes, Jeremy Sevareid, David Barrett, Brendon Wilson, Dylan Parker, Erik Arvidsson, Alex Russell, Adam Fisk, Alex Lynch, Joseph Hoang Do, Richard MacManus, Garret Wilson, Ray Baxter, Chris Messina, and David Weekly.

Dion 2005-11-25 10:33 发表评论

一个用于J2EE应用�E�序的Backbase Ajax前端

Dion — Wed, 23 Nov 2005 12:31:00 GMT

一个用于J2EE应用�E�序的Backbase Ajax前端

旉��Q?005-11-03
作者：Mark Schiefelbein
��览�ơ数�Q? 628
本文关键字：Ajax, RIA, Rich Internet Application, backbase, Dev Toolbox, Eclipse, WebLogic

文章工具
推荐�l�朋�?/a>
打印文章

　　动态HTML技术已�l�出��C��多年。最�q�，Google的最新Web应用�E�序GMail、Google Suggests和Google Maps�Q�在前端��面中重新引入了��Z��标准的DHTML开发模型。Google证明了，DHTML开发模型能够让开发�h员创建具有可视化吸引力和高度交互式的Rich Internet Application�Q�丰富网�l�应用程序，RIA�Q��?/p>

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

有一个客��L��引擎担�Q用户界面�Q�UI�Q�和服务器之间的中介�?/li>
用户行�ؓ由客��L��引擎处理�Q�而不是生成发往服务器的��面��h��?/li>
XML数据在客��L��引擎和服务器之间传输�?/li>

　　换言之，Ajax解决�Ҏ��包括一个客��L��引擎�Q�它用于呈现用户界面�Q��ƈ使用XML格式与服务器通信。这个引擎由很多JavaScript函数�l�成�Q�位于Web��览器中�Q�它不需要插�Ӟ��也不需要用户安装�?/p>

　　��Z��Ajax的RIA正在�q�速成为Web应用�E�序前端的基准，因�ؓ它可以同时提供二者的优点�Q�丰富性和可达性。Ajax应用�E�序和桌面应用程�? 一样丰富，响应高度灉|��Q��ƈ且可以在一个页面上提供所有数据，无需��h��面。它们还拥有��Z��标准的浏览器应用�E�序的可达性特点，�q�类应用�E�序可以在不具备 ��览器插件或客户端applet的情况下�q�行部��v�?/p>

　　Backbase所提供的Ajax软�g��h��以下特点�Q�基于标准、功能全面且易于使用。Backbase Presentation Client (BPC)��Z��Ajax技术，它��用称为Backbase XML (BXML)的附加标�{�扩展了DHTML。Backbase XML Server Edition for J2EE (BXS)包含了一些服务器端的�l��g�Q�利用这些组�Ӟ��J2EE开发�h员可以快速开发J2EE应用�E�序的Ajax前端�?/p>

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

Backbase Ajax表示�?/strong>

　　Web开发�h员应该能够轻村ֈ�建具有以下特点的Rich Internet Application (RIA)�Q�完全基于HTML标准�Q�W3C�Q�，不需要最�l�用户安装插�Ӟ��速度��快�Q�能够在所有浏览器上进行操作，�q�与J2EE�q�行时和开发环境完全集成�? RIA利用客户端（Web��览器）资源创徏和管理用��L��面，从而�ؓ最�l�用��h��供一个响应灵敏而且��h��应用�E�序风格的用��L��面�?/p>
　　�q�种�Ҏ��最�q�被�U�CؓAjax。Ajax�q�个术语的灵感来源于Gmail、Google Maps和Google Suggests�q�类应用�E�序�Q�它把现有的��览器技术提高到了一个新的水�q�上。RIA从根本上改进了在�U�应用程序的可用性和有效性。Ajax RIA只��用标准的��览器技术（如JavaScript、XHTML和XMLHttpRequest对象�Q�就做到了这一炏V��通过使用 XMLHttpRequest�Q�在��数据异步加载到界面中时��无需��h��面�?/p>
　　Backbase在J2EE架构中提供一个Ajax表示层，它结合了目前的J2EE服务器和先进的富客户端技术的优点。Backbase表示�? 控制了富用户界面的每个方面：与最�l�用��L��交互模型�Q�与后端�pȝ��的集成，以及整个客户�?服务器通信。Backbase直接提供了用于聚合来自�Q意位�|�的 XML的下一个范型，��数据绑定到先进的富用户界面控�g�Q��ƈ在一个统一的富用户界面中交付组合应用程序�?/p>
　　Backbase表示层由一个客��h��和一个服务器�l�成。Backbase Presentation Client (BPC)是一个基于Ajax的GUI引擎�Q�它允许开发�h员以声明性的方式快速构建RIA。Backbase XML(BXML)是对XHTML的扩展。它为开发�h员提供了交付富前端功能的附加标签(B tag)。Backbase XML Server (BXS)提供一�U�XML��水�U�架构，利用它可以从Web服务、数据库或Java对象获取数据�Q�可以聚合和转换�q�些数据�Q��ƈ��其�l�定到BPC中的UI�? 素。BPC和BXS相结合，可以在Web��览器和应用服务器之间搭��Z��座功能强大的桥梁�Q��ƈ提供一个分布在客户端和服务器上的完整的富Internet�? �C�层�?/p>
　　�?说明了在逻辑和物理应用程序架构中�Q�Backbase所处的位置。应用程序由一个J2EE后端和一个基于Ajax的RIA前端�l�成。从逻辑上说�Q�Backbase提供了表�C�层�Q�而J2EE提供了业务逻辑和数据层。从物理上说�Q�表�C�层分布在客��L��和服务器上。在客户端上�Q�Backbase使用 BPC扩展了浏览器。在服务器上�Q�Backbase使用BXS扩展了应用服务器�?/p>

�?. Backbase富Internet表示�?/p>
Pet Store案例分析

　　我们��用Java Pet Store作�ؓ案例来分析如何�ؓJ2EE应用�E�序��d��Backbase RIA前端。Java Pet Store Demo是Sun Microsystems提供的一个示例应用程序，其目的是��Z��演示如何使用Java 2 Platform, Enterprise Edition(J2EE)构徏Web应用�E�序�Q�详情请参见http://java.sun.com/developer/releases/petstore�Q��?/p>
　　Java Pet Store是业内一个著名的参考应用程序（pet store�q�有.NET和Flash版本�Q�。由于以下两个原因，它成��ZؓJ2EE应用�E�序��d��Z��Ajax的RIA前端的完��案例：

Java Pet Store是一个完整的Web应用�E�序�?/li>
Sun设计Pet Store的目的是演示所有常见的Web应用�E�序功能。通过使用Pet Store作�ؓ案例�Q�我可以说明为J2EE应用�E�序��d��RIA层的所有方面�?/p>
作�ؓ一个典型的在线商店�Q�它包含以下功能�Q?/p>
��览产品�c�d��?/li>
在购物�R中添加和删除物品�?/li>
填写订单表单�?/li>
提交订单�?/li>
Java Pet Store有一个传�l�的HTML前端�?/li>
使用RIA前端的目的是提供更简单和响应更灵敏的GUI�Q�以及通常更�ؓ丰富的Web用户体验。我��说明，如何通过Backbase RIA技术极大地改进应用�E�序的前端，同时无需对后端和��M��pȝ��需求做��M��修改�?/p>
Pet Store的RIA前端��通过以下方式改善可用性：
把前端变��Z��个单��面的界面（SPI�Q��?/li>
提供更先�q�的UI控�g�Q�如模态弹出式菜单�Q��?/li>
使用可视化效果（例如�Q�把宠物攑օ�购物车）�?/li>
更加有效地利用电脑屏�q�的操作区域�?/li>

RIA Pet Store前端

　　在这一节中�Q�我��讨论经�q�改�q�的新Pet Store RIA前端�?/p>
　　下面的两个屏�q�快照演�C�Z��前端的改�q�。要获得对Backbase RIA前端更直观的感受�Q�请讉K��http://www.backbase.com/xmlserver上的在线演示�Q�或者到http://www.backbase.com/download下蝲Backbase�C�֌�版本�?/p>
下面两个囑֯�两个前端�q�行了可视化的比较。图2昄��的是原来静态的多页面HTML前端。图3昄��的是新的Backbase SPI前端�Q?

�?. 原始HTML前端

�?. 新Backbase前端

　　Backbase为创��Z��富的单页面Web界面提供了许多可能性。下面列��Z��一些Pet Store所使用的例子�?/p>

选项卡式的单��面��览
在Web界面上，不同的动物种�c�（狗、猫�{�等�Q�被表示��Z��同的选项卡。点��M��个选项卡就会打开相应的类别，昄��可供出售的宠物�?/p>
在Backbase SPI中，无需��h��面��可以打开选项卡。BPC只从服务器请求所需的数据，然后更新客户端的视图。SPI机制可以极大地羃短响应时��_��让客户随心所�Ʋ地在类别之间来回穿梭�?/p>
�z�d��的多功能界面
界面有三个主要功能——类别浏览、购物�R和页面引导历史记录，它们在界面上都是一直可见的。因此，购物者��L��能够查看购物车的当前内容或最�q�看�q�的宠物的记录�?/p>
�q�些功能是高度同步的�Q�浏览一个宠物时�Q�历史记录将自动更新为在记录中显�C��宠物。定购一个宠物时�Q�它��被��d��到购物�R中。上�q�C��切都发生在客��L��的一个页面上�Q�例如，无需重新加蝲��面��可以更新界面的各个部分�Q��?/p>
界面变化的流畅可视化效果
�q�行��览�Ӟ��客户��会看到不断变化的界面视图。例如，他可以按照�h格和名称对宠物进行排序。界面需要根据新的排列顺序显�C�更��C��后的宠物清单�?/p>
在Backbase RIA前端中，以前的视图被使用可视化效果的新视图所代替�Q�新视图向最�l�用��h��C�Z��么正在改变。图4说明了如何通过��畅的定位效果，把按名称排列的顺序�{变�ؓ按�h格排列的��序�Q?

�?.�c�d��视图的排列顺序�{�?/p>
用于提高转换速度的信息栏验证

　　��Z��执行购买�Q�购买者必��d��一份表单中填入个�h详细信息。Backbase极大地简化了�q�个购买�q�程�Q�通过客户端的信息栏验证提供即时的反馈�Q��ƈ在提供所有数据的�q�程中提供逐步的指南和概述�?/p>
　　�?昄��了在填写表单的第一个步骤中�Q�对于e-mail地址信息栏的验证。当购买者填写下一栏时�Q�就会提供即时的反馈�?

�?. 信息栏验证—e-mail�?/p>
Backbase RIA Pet Store的架�?/strong>

　　增强Pet Store�Q�或其他��M��Web应用�E�序�Q�的前端�Ӟ��我们��l�依赖于以下两条架构基本原则�Q?/p>

最�l�用户仍然��用标准的Web��览器访问Pet Store�Q�无需��d��M��插�g�?/li>
由J2EE业务逻辑和数据组成的整个后端保持不变�?/li>

　　现有的后端在开发期间是完全孤立的，而且不会改变�Q�这个事实对于架构师和IT��理人员十分有利。通过一个规整的、模块化的架构，他们��能够控刉��险和成本�Q�同时显著提高Web应用�E�序的用户友好性�?/p>
　　Backbase的富表示层技术由两个模块�l�成�Q�它们将被加入到架构中。在客户端，BPC��理着SPI�Q��ƈ通过异步响应事�g来处理与最�l�用户之间的交互。在服务器端�Q�Backbase XML Server�q�个灉|��的XML��道可以�q�接��C�Q意服务器端的数据源，包括Web服务、文件、数据库或本地Java对象。图6说明了BPC和BXS如何共同为RIA提供一个声明式的、基于XML的端到端表示层�?

�?. 声明式的端到端表�C�层

Backbase表示客户�?/strong>

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

�?. BPC�q�行�?/p>
Backbase XML

　　Backbase XML (BXML)是XHTML的扩展。开发�h员通过创徏BXML应用�E�序来开发富前端�Q�包括BXML标签、标准的XHTML和CSS。BXML是一�U�声明性语�a��Q�它包含了XHTML中所没有的标�{�（B标签�Q?/p>
　　BXML包含用于下列用途的标签�Q?/p>

定义屏幕分区()
交互式客��L��控制()
处理标准的用户交互事�?onClick)
处理高��的用户交互事�?拖放和调整大��?
��理客户端状�?/li>
处理可视化效�?使修改�Q意CSS属性的�q�程动画�?
数据�l�定
使用XSLT的一个子集进行客��L��转换

用于J2EE的Backbase XML Server

　　Backbase XML Server (BXS)是一个服务器端的引擎�Q�用于把BPC链接��C�Q意J2EE后端。和BPC一��P��BXS是完全基于XML的，其编�E�是声明性的。它使用一�U�XML��道架构�Q�提供功能强大的服务器端转换和聚合�?/p>
　　BXS附带一些用于访问最常用的数据源�Q�包括Web服务、数据库、文件系�l�和本地Java对象�Q�的开��即用�Q务。我们��用Backbase标签对从�q�些源获得的数据�q�行聚合�Q�然后��用XSLT�q�行转换。结果以无格式XML数据或BXML表示代码的�Ş式返回给BPC�?/p>
　　BXS�q�提供一些应用服务，包括�w�䆾验证、授权、日志记录和用户跟踪。图8昄��了BXS的��M��架构�?/p>

�?. BXS架构

Eclipse开发工�?/strong>

　　��Z��让J2EE开发�h员可以只使用一�U�开发工具就能创建完整的Web应用�E�序�Q�包括富前端�Q�Backbase提供了一个Eclipse插�g。如�?所�C�，该插件提供了在Eclipse中突出显�C��法和Backbase标签代码自动完成的功能�?

�?. Backbase Eclipse插�g

　　注意�Q�Eclipse的可视化拖放开发插件还处在开发阶�D�c�?/p>
部��v到BEA WebLogic

　　BXS是一个与标准兼容的J2EE应用�E�序�Q�可以将光��|�到��M��J2EE应用服务器上。图10昄��了如何��用WebLogic控制台把BXS部��v�?a target="_blank">BEA WebLogic Server�?

�?0. 把BXS部��v到BEA WebLogic

实现Backbase RIA Pet Store

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

初始化：用户在浏览器中输入宠物商店的URL�Q�对BPC�q�行初始化�?/li>
应用�E�序布局�Q�触发正在构造的事�g�Q�BPC构徏整体应用�E�序布局�Q�宠物类别被加蝲�q�显�C�在选项卡中�?/li>
默认数据�Q�默认情况下加蝲狗的�c�d��Q�最初显�C?张狗的图片，�q�带有向�?向后和排序功能�?/li>

　　用户交互�Q�用��L��击Next按钮便可昄��~�号�?�?6的狗囄��?

�?1.��序图：富商店前�?/p>

初始�?/li>
从用户在��览器中输入宠物商店的URL开始，�q�将��D��从Web服务器请求一个烦引页面�?/p>
索引��面包含用于实例化BPC的代码。烦引页面是XHTML和BXML标签的结合，包含负责启动富前端的初始化事件处理程序�?/p>
BPC初始化代码：
<...>

<...>