Ajax 和 XML: 用于表格的 Ajax

最新推荐文章于 2025-04-03 14:05:43 发布

elimago

最新推荐文章于 2025-04-03 14:05:43 发布

阅读量1.1k

点赞数 1

分类专栏： ajax 文章标签： ajax xml javascript prototype html div

ajax 专栏收录该内容

31 篇文章

订阅专栏

使用 Ajax 构建表格、选项卡和滑动块

级别：中级

Jack D Herrington (jherr@pobox.com), 高级软件工程师, Leverage Software Inc.

2008 年 4 月 02 日

Asynchronous JavaScript™ + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术，探索将 Ajax 用于动态数据显示的多种技巧。

访问 Ajax 技术资源中心，developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。

当人们想到 Ajax 和 Web 2.0 时，他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好，无需页面刷新，这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载，就是拥有最快的连接速度，也能够发现上下文的变化。

常用的缩写词

DHTML：动态 HTML
HTML：超文本标记语言
XSLT：可扩展样式表语言转换

在本文中，我将介绍多种技巧 — 包括使用 Ajax 和不使用的技巧 — 演示了用户体验设计中自由改变上下文的方法。我将从最简单的 Ajax 用户体验示例（即选项卡式窗口）开始。

选项卡式窗口

选项卡是将大量数据放置在相对少量的固定区域中的最简单方法。并且优秀的 Prototype.js JavaScript 库使得在动态 HTML (DHTML) 中构建支持 Ajax 的选项卡式窗口非常容易，如清单 1 所示。要了解有关 Prototype 库的更多信息并下载它的副本以供使用，请参阅参考资料。

清单 1. index.html

                
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<a href="javascript:void loadTab( 'tab1.html' )">Tab 1</a> |
<a href="javascript:void loadTab( 'tab2.html' )">Tab 2</a> |
<a href="javascript:void loadTab( 'tab3.html' )">Tab 3</a>
<div id="content" style="padding:5px;border:2px solid black;">
</div>
<script>
function loadTab( tab ) { 
  new Ajax.Updater( 'content', tab, { method: 'get' } );
}
loadTab( 'tab1.html' );
</script>
</body>
</html>

在该文件的顶部，我包含了 Prototype.js 库，它处理所有 Ajax 工作。然后，您会看到一个到各个页面的链接列表，每个链接都调用 loadTab 来更新页面的内容区域。内容区域是一个 <div>，其 ID 为 content。loadTab 函数调用 Ajax.Updater 来用指定的 HTML 文件更新内容 <div>。

清单 2 显示第一个选项卡 HTML 文件。所有其他文件都类似于该文件。

清单 2. tab1.html

                
Tab 1

当我在自己的浏览器中浏览该文件时，我看到类似图 1 的某些内容。

图 1. 初始选项卡页

然后，当我单击第二个选项卡时，我会看到如图 2 所示的内容。

图 2. 单击第二个选项卡之后

选项卡式窗口的现场演示

要在真实的环境中查看选项卡式窗口示例，请观看此在线演示。

您可以通过对内容使用隐藏的 <div> 标签，然后关闭其可见性来实现此功能。此 Ajax 方法的优势在于仅在必要时创建和加载内容。因此，如果用户选择不查看内容，则构建内容的计算时间将会减少或消除。

下面的三个示例是使用 Ajax 技巧（或类似于 Ajax 的某种技术)处理表格的所有方法。

回页首

使用 Ajax 的基本表格

我的第一个使用 Ajax 构建表格的演示是，通过 Ajax 向服务器发送 XML 请求，此技巧的价值是双重的。首先，它根据需要加载数据，并且可以适当地更新，这使得用户体验非常愉快。其次，该技巧需要一个 XML 数据源，该数据源不仅对 Ajax 代码有用，它对于希望通过 XML 使用您的数据的任何客户端都非常有价值。

清单 3 显示了 XML 驱动的表格示例代码。

清单 3. index.html

                
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table id="books">
</table>
<script>
new Ajax.Request( 'books.xml', { 
  method: 'get',
  onSuccess: function( transport ) {
    var bookTags = transport.responseXML.getElementsByTagName( 'book' );

    for( var b = 0; b < bookTags.length; b++ ) {
      var author = bookTags[b].getElementsByTagName('author')[0].firstChild.nodeValue;
      var title = bookTags[b].getElementsByTagName('title')[0].firstChild.nodeValue;
      var publisher = 
          bookTags[b].getElementsByTagName('publisher')[0].firstChild.nodeValue;

      var elTR = $('books').insertRow( -1 );
      var elTD1 = elTR.insertCell( -1 );
      elTD1.innerHTML = author;
      var elTD2 = elTR.insertCell( -1 );
      elTD2.innerHTML = title;
      var elTD3 = elTR.insertCell( -1 );
      elTD3.innerHTML = publisher;
    }
  }
} );
</script>
</body>
</html>

使用 Ajax 的基本表格的现场演示

要在真实环境中查看基本表格示例，请观看此在线演示。

Ajax.Request 调用的 onSuccess 处理程序首先获取每个 book 元素，分解 XML 数据。然后，它从嵌入的标签中获取 author、 title 和 publisher 值。最后，它对每个 book 使用 insertRow 和 insertCell 将数据添加到表格中。

清单 4 显示了本示例的 XML 代码。

清单 4. books.xml

                
<books>
  <book>
    <author>Jack Herrington</author>
    <title>Code Generation In Action</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>Podcasting Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
</books>

图 3 显示了生成的 DHTML 文件。

图 3. XML 驱动的表格页

本示例非常适合于小型结果集，但对于较大的结果集会怎样呢？

回页首

使用 Ajax 的分页表格

为了使用 Ajax 创建分页表格，我介绍一种稍有不同的技巧。这并不是因为我必须使用这种技术 — 我可以轻松扩展上述 XML 技巧 — 但我希望本文中的这些示例可以向您展示各种技巧，您可以从中选择适合您的应用程序需求的技巧。

在本例中，我使用一个 PHP 数据源，该数据源提供了分页表格的各个页面的 HTML 代码块。此 HTML 代码以清单 5 开始。

清单 5. index.html

                
<html>
   <head>
   <script src="prototype.js"></script>
   </head>
   <body>
   <div>
   <a href="javascript:void updateTable(0);">1</a> |
   <a href="javascript:void updateTable(1);">2</a> |
   <a href="javascript:void updateTable(2);">3</a> |
   <a href="javascript:void updateTable(3);">4</a> |
   <a href="javascript:void updateTable(4);">5</a> |
   <a href="javascript:void updateTable(5);">6</a>
   </div>
   <div id="states">
   </div>
   <script>
   function updateTable( start ) {
      new Ajax.Updater( 'states', 'stats.php?start='+(start*10)+'&count=10', 
      { method: 'get' } );
   }
   updateTable( 0 );
   </script>
   </body>
</html>

大多数页面都位于指向表格的各种页面的链接中。然后，states <div> 标签收到来自 stats.php 页面的表格内容。

为了运行多页面的示例，我需要一个较大的数据集，因此我找到了一些美国人口统计信息并创建了一个 PHP 函数 getdata，该函数返回一个数组，其中包含这些年来各个州及其人口。清单 6 显示了该函数的一段摘录。

清单 6. data.php

                
<?php
function getdata()
{
   $population = array();
   $population []= 
       array( 'Alabama',4447100,4527166,4596330,4663111,4728915,4800092,4874243 );
   $population []= array( 'Alaska',626932,661110,694109,732544,774421,820881,867674 );
...
   $population []= array( 'Wyoming',493782,507268,519886,528005,530948,529031,522979 );
   return $population;
}
?>

现在，为了获得数据的各个部分，我创建了一个 stats.php 页面，该页面提供了一个开始和结束索引，返回一个只包含该部分数据的 HTML 表格。清单 7 显示了该文件。

清单 7. stats.php

                
<table>
<?php
require 'data.php';
   $data = getdata();
   $start = 0;
$count = count( $data );
   if ( array_key_exists( 'start', 
         
         
            使用 Ajax 构建表格、选项卡和滑动块
            

         
         
            级别： 中级
            Jack D Herrington (jherr@pobox.com), 高级软件工程师, Leverage Software Inc.

            2008 年 4 月 02 日
            
             
             
            
              
              Asynchronous JavaScript™ + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术，探索将 Ajax 用于动态数据显示的多种技巧。
            
              
              访问 Ajax 技术资源中心，developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 
            
             
             
             
             
             
             
             
             
            当人们想到 Ajax 和 Web 2.0 时，他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好， 无需页面刷新，这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载，就是拥有最快的连接速度，也能够发现上下文的变化。 
            
             
              
                 常用的缩写词
 
                     DHTML：动态 HTML 
HTML：超文本标记语言 
XSLT：可扩展样式表语言转换 
 
 
            在本文中，我将介绍多种技巧 — 包括使用 Ajax 和不使用的技巧 — 演示了用户体验设计中自由改变上下文的方法。我将从最简单的 Ajax 用户体验示例（即选项卡式窗口）开始。 
            选项卡式窗口
            选项卡是将大量数据放置在相对少量的固定区域中的最简单方法。并且优秀的 Prototype.js JavaScript 库使得在动态 HTML (DHTML) 中构建支持 Ajax 的选项卡式窗口非常容易，如 清单 1 所示。要了解有关 Prototype 库的更多信息并下载它的副本以供使用，请参阅 参考资料。 
            
清单 1. index.html

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<a href="javascript:void loadTab( 'tab1.html' )">Tab 1</a> |
<a href="javascript:void loadTab( 'tab2.html' )">Tab 2</a> |
<a href="javascript:void loadTab( 'tab3.html' )">Tab 3</a>
<div id="content" style="padding:5px;border:2px solid black;">
</div>
<script>
function loadTab( tab ) { 
  new Ajax.Updater( 'content', tab, { method: 'get' } );
}
loadTab( 'tab1.html' );
</script>
</body>
</html>
 
            

            在该文件的顶部，我包含了 Prototype.js 库，它处理所有 Ajax 工作。然后，您会看到一个到各个页面的链接列表，每个链接都调用 loadTab 来更新页面的内容区域。内容区域是一个 <div>，其 ID 为 content。loadTab 函数 调用 Ajax.Updater 来用指定的 HTML 文件更新内容 <div>。 
            清单 2 显示第一个选项卡 HTML 文件。所有其他文件 都类似于该文件。 
            
清单 2. tab1.html

            
             
                              
Tab 1
 
            

            当我在自己的浏览器中浏览该文件时，我看到类似 图 1 的某些内容。 
            
图 1. 初始选项卡页
 

            然后，当我单击第二个选项卡时，我会看到如 图 2 所示的内容。 
            
图 2. 单击第二个选项卡之后
 

            
             
              
                 选项卡式窗口的现场演示
 要在真实的环境中查看选项卡式窗口示例，请 观看此在线演示。
 
 
            您可以通过对内容使用隐藏的 <div> 标签，然后关闭其可见性来实现此功能。此 Ajax 方法的优势在于仅在必要时创建和加载内容。因此，如果用户选择不查看内容，则构建内容的计算时间将会减少或消除。 
            下面的三个示例是使用 Ajax 技巧（或类似于 Ajax 的某种技术)处理表格的所有方法。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            使用 Ajax 的基本表格
            我的第一个使用 Ajax 构建表格的演示是，通过 Ajax 向服务器发送 XML 请求，此技巧的价值是双重的。首先，它根据需要加载数据，并且可以适当地更新，这使得用户体验非常愉快。其次，该技巧需要一个 XML 数据源，该数据源不仅对 Ajax 代码有用，它对于希望通过 XML 使用您的数据的任何客户端都非常有价值。 
            清单 3 显示了 XML 驱动的表格示例代码。
            
清单 3. index.html

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table id="books">
</table>
<script>
new Ajax.Request( 'books.xml', { 
  method: 'get',
  onSuccess: function( transport ) {
    var bookTags = transport.responseXML.getElementsByTagName( 'book' );

    for( var b = 0; b < bookTags.length; b++ ) {
      var author = bookTags[b].getElementsByTagName('author')[0].firstChild.nodeValue;
      var title = bookTags[b].getElementsByTagName('title')[0].firstChild.nodeValue;
      var publisher = 
          bookTags[b].getElementsByTagName('publisher')[0].firstChild.nodeValue;

      var elTR = $('books').insertRow( -1 );
      var elTD1 = elTR.insertCell( -1 );
      elTD1.innerHTML = author;
      var elTD2 = elTR.insertCell( -1 );
      elTD2.innerHTML = title;
      var elTD3 = elTR.insertCell( -1 );
      elTD3.innerHTML = publisher;
    }
  }
} );
</script>
</body>
</html>
 
            

            
             
              
                 使用 Ajax 的基本表格的现场演示
 要在真实环境中查看基本表格示例，请 观看此在线演示。
 
 
            Ajax.Request 调用的 onSuccess 处理程序首先获取每个 book 元素，分解 XML 数据。然后，它从嵌入的标签中获取 author、 title 和 publisher 值。最后，它对每个 book 使用 insertRow 和 insertCell 将数据添加到表格中。 
            清单 4 显示了本示例的 XML 代码。
            
清单 4. books.xml

            
             
                              
<books>
  <book>
    <author>Jack Herrington</author>
    <title>Code Generation In Action</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>Podcasting Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
</books>
 
            

            图 3 显示了生成的 DHTML 文件。
            
图 3. XML 驱动的表格页
 

            本示例非常适合于小型结果集，但对于较大的结果集会怎样呢？
            

            
             
             

            
             
             
 
                 
回页首
 
            


            使用 Ajax 的分页表格
            为了使用 Ajax 创建分页表格，我介绍一种稍有不同的技巧。这并不是因为 我必须使用这种技术 — 我可以轻松扩展上述 XML 技巧 — 但我希望本文中的这些示例可以向您展示各种技巧，您可以从中选择适合您的应用程序需求的技巧。 
            在本例中，我使用一个 PHP 数据源，该数据源提供了分页表格的各个页面的 HTML 代码块。此 HTML 代码以 清单 5 开始。 
            
清单 5. index.html

            
             
                              
<html>
   <head>
   <script src="prototype.js"></script>
   </head>
   <body>
   <div>
   <a href="javascript:void updateTable(0);">1</a> |
   <a href="javascript:void updateTable(1);">2</a> |
   <a href="javascript:void updateTable(2);">3</a> |
   <a href="javascript:void updateTable(3);">4</a> |
   <a href="javascript:void updateTable(4);">5</a> |
   <a href="javascript:void updateTable(5);">6</a>
   </div>
   <div id="states">
   </div>
   <script>
   function updateTable( start ) {
      new Ajax.Updater( 'states', 'stats.php?start='+(start*10)+'&count=10', 
      { method: 'get' } );
   }
   updateTable( 0 );
   </script>
   </body>
</html>
 
            

            大多数页面都位于指向表格的各种页面的链接中。然后，states <div> 标签收到来自 stats.php 页面的表格内容。 
            为了运行多页面的示例，我需要一个较大的数据集，因此我找到了一些美国人口统计信息并创建了一个 PHP 函数 getdata，该函数返回一个数组，其中包含这些年来各个州及其人口。清单 6 显示了该函数的一段摘录。
            
清单 6. data.php

            
             
                              
<?php
function getdata()
{
   $population = array();
   $population []= 
       array( 'Alabama',4447100,4527166,4596330,4663111,4728915,4800092,4874243 );
   $population []= array( 'Alaska',626932,661110,694109,732544,774421,820881,867674 );
...
   $population []= array( 'Wyoming',493782,507268,519886,528005,530948,529031,522979 );
   return $population;
}
?>
 
            

            现在，为了获得数据的各个部分，我创建了一个 stats.php 页面，该页面提供了一个开始和结束索引， 返回一个只包含该部分数据的 HTML 表格。清单 7 显示了该文件。 
            
清单 7. stats.php

            
             
              ___FCKpd___6
 
            

            当我在自己的浏览器中浏览该页面时，如 图 4 所示，它将自动加载第一个页面。 
            
图 4. 分页表格显示
 

            当我单击表格的各个部分时，stats.php 中的表格会动态地加载。图 5 显示了当我单击数据的第二页时发生的情况。 
            
图 5. 分页表格显示的第二页 
 

            
             
              
                 使用 Ajax 的分页表格的现场演示
 要在真实环境中查看页面表格示例，请 观看此在线演示。
 
 
            该技巧类似于我对选项卡所使用的技巧。通过 Ajax 传递 HTML 通常与 XML 一样有效。并且更容易在浏览器上实现，因为 XML 不需要被解析并再次转换回 HTML。 
            我演示的第三种表格构建技巧是动态构建表格的最容易的非 Ajax 方法。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            隐藏的分页表格
            清单 8 中的页面显示了在没有 Ajax 作为后端的情况下创建分页表格的一种简单技巧。 
            
清单 8. index.php

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<div>
<?php
require( 'data.php' );

$data = getdata();
$states = count( $data ) / 10;

for( $s = 0; $s < $states; $s++ ) {
?>
<?php echo( ( ( $s == 0 ) ? '' : '| ' ) ); ?>
<a href="javascript:void updateTable(<?php echo( $s ) ?>);">
      <?php echo( $s + 1 ) ?>
</a>
<?php
}
?>
</div>

<?php
$index = 0;
foreach( $data as $state ) {
?>
<?php
if ( $index % 10 == 0 ) {
?>
<?php if ( $index > 0 ) { ?></table></div><?php } ?>
<div id="states<?php echo( $index / 10 ) ?>" style="display:none;">
<table>
<?php 
}
?>
<tr>
<?php
foreach( $state as $item ) {
?>
<td><?php echo($item); ?></td>
<?php
}
?>
</tr>
<?php
$index += 1;
}
?>
</table>
</div>

<script>
function updateTable( id )
{
  var elStateDivs = [];
<?php
for( $s = 0; $s < $states; $s++ ) {
?>
  elStateDivs.push( $( 'states<?php echo( $s ) ?>' ) );
<?php
}
?>
  for( var i = 0; i < elStateDivs.length; i++ ) {
    if ( i == id ) elStateDivs[i].show();
    else elStateDivs[i].hide();
  }
}

updateTable( 0 );
</script>

</body>
</html>
 
            

            在本例中，我使用 PHP 代码创建了一系列 <div> 标记 — 一个标记用于表格中的一个页面。默认情况下显示第一个标记，而隐藏其他标记。updateTable 函数根据选择的页面显示或隐藏表格的各个部分。 
            
             
              
                 隐藏的分页表格的现场演示
 要在真实环境中查看隐藏的分页表格示例，请 观看此在线演示。
 
 
            注意，我仍然包含了 Prototype.js 库 — 并非因为 Ajax 支持。我只是希望使用以下方法更容易获得每个 <div> 元素：$() 方法以及 show 和 hide 方法，所有这些方法都能够由这个库来实现。 
            图 6 显示了这个页面。
            
图 6. 模拟页面表格显示
 

            最后一个 Ajax 示例显示了一个滑动块控件。滑动块 是一种新的显示形式， 当显示的页面发生变化时，它会提供动态的左/右运动。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            滑动块
            为了启用滑动块效果，我需要另外几个库。第一个库是 Scriptaculous 库，该库构建在 Prototype.js 之上。它提供滑动块使用的效果。第二个库是 Glider 库。 
            清单 9 显示了一个滑动块示例。
            
清单 9. index.html

            
             
                              
<html><head>
<link rel="stylesheet" href="stylesheets/glider.css" type="text/css">
<script src="javascripts/prototype.js"></script>
<script src="javascripts/effects.js"></script>
<script src="javascripts/glider.js"></script>
</head><body>
<div id="glider"><div class="controls">
<a href="#tab1">Tab 1</a> | 
<a href="#tab2">Tab 2</a> |
<a href="#tab3">Tab 3</a> |
<a href="#tab4">Tab 4</a></div>
<div class="scroller"><div class="content">
<div class="section" id="tab1">Tab 1</div>
<div class="section" id="tab2">Tab 2</div>
<div class="section" id="tab3">Tab 3</div>
<div class="section" id="tab4">Tab 4</div>
</div></div></div>
<script>
new Glider( 'glider', { duration:0.5 } );
</script>
</body></html>
 
            

            
             
              
                 滑动块效果的现场演示
 要在真实环境中查看滑动块示例，请  观看此在线演示。
 
 
            在该文件的顶部包含了各种脚本库。然后还有滑动块 <div>，它包含一个名为 controls 的 <div> 和一个名为 scroller 的 <div>，前者具有指向每个选项卡的锚标签 ，而后者包含每个选项卡的内容。底部的脚本创建一个 Glider 对象，该对象具有滑动块 <div> 元素的 ID。 
            当我在自己的浏览器中打开此页面时，我看到类似于 图 7 所示的内容。
            
图 7. 使用滑动块实现的选项卡示例 
 

            当我单击另一个选项卡时，内容便逐字地向其滑动。
            

            
             
             

            
             
             
 
                 
回页首
 
            


            结束语
            在本文中，我介绍了一些不同类型的界面元素，它们可以使用 Ajax、PHP 和 Prototype.js 库构建。希望您能够采纳其中的一些建议，并将其用于您自己的 Web 应用程序。它们非常容易，并且 Prototype.js 库确实使 Ajax 更加灵活。如果您愿意分享您的成功经历，请加入 developerWorks Ajax 论坛：我们非常愿意倾听您的建议。 
            


            参考资料 
            学习

            
             
             您可以参阅本文在 develperWorks 全球网站上的 英文原文。

Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 

PHP 主页：为 PHP 程序员提供了宝贵的资源。

Prototype 库：了解这个用于简化动态 Web 应用程序开发的 JavaScript Framework。

Scriptaculous JavaScript 库：查找一些显示帮助器和特效，使用这个基于 Prototype 的框架改善您的 Web 站点。

Prototype.js 文档页：访问官方 Prototype blog 和其他很多资源的链接，获得关于 Prototype JavaScript 库的更多信息。

jQuery：探索另一个 JavaScript 库，它提供了与 Prototype.js 类似的功能。

Yahoo! User Interface Library：查看 Yahoo! 的 Ajax 工具箱。

滑动块控件：在选项卡样式的交互操作上添加新特性。

IBM XML 认证：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。

XML 技术库：developerWorks XML 专区，获取大量技术文章和技巧、教程、标准和 IBM 红皮书。

developerWorks 技术事件和网络广播：随时关注这些领域的技术进展。

The 技术书店 ：浏览有关这些以及其他技术主题的书籍。
            
 
GET ) ) $start = 
         
         
            使用 Ajax 构建表格、选项卡和滑动块
            

         
         
            级别： 中级
            Jack D Herrington (jherr@pobox.com), 高级软件工程师, Leverage Software Inc.

            2008 年 4 月 02 日
            
             
             
            
              
              Asynchronous JavaScript™ + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术，探索将 Ajax 用于动态数据显示的多种技巧。
            
              
              访问 Ajax 技术资源中心，developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 
            
             
             
             
             
             
             
             
             
            当人们想到 Ajax 和 Web 2.0 时，他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好， 无需页面刷新，这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载，就是拥有最快的连接速度，也能够发现上下文的变化。 
            
             
              
                 常用的缩写词
 
                     DHTML：动态 HTML 
HTML：超文本标记语言 
XSLT：可扩展样式表语言转换 
 
 
            在本文中，我将介绍多种技巧 — 包括使用 Ajax 和不使用的技巧 — 演示了用户体验设计中自由改变上下文的方法。我将从最简单的 Ajax 用户体验示例（即选项卡式窗口）开始。 
            选项卡式窗口
            选项卡是将大量数据放置在相对少量的固定区域中的最简单方法。并且优秀的 Prototype.js JavaScript 库使得在动态 HTML (DHTML) 中构建支持 Ajax 的选项卡式窗口非常容易，如 清单 1 所示。要了解有关 Prototype 库的更多信息并下载它的副本以供使用，请参阅 参考资料。 
            
清单 1. index.html

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<a href="javascript:void loadTab( 'tab1.html' )">Tab 1</a> |
<a href="javascript:void loadTab( 'tab2.html' )">Tab 2</a> |
<a href="javascript:void loadTab( 'tab3.html' )">Tab 3</a>
<div id="content" style="padding:5px;border:2px solid black;">
</div>
<script>
function loadTab( tab ) { 
  new Ajax.Updater( 'content', tab, { method: 'get' } );
}
loadTab( 'tab1.html' );
</script>
</body>
</html>
 
            

            在该文件的顶部，我包含了 Prototype.js 库，它处理所有 Ajax 工作。然后，您会看到一个到各个页面的链接列表，每个链接都调用 loadTab 来更新页面的内容区域。内容区域是一个 <div>，其 ID 为 content。loadTab 函数 调用 Ajax.Updater 来用指定的 HTML 文件更新内容 <div>。 
            清单 2 显示第一个选项卡 HTML 文件。所有其他文件 都类似于该文件。 
            
清单 2. tab1.html

            
             
                              
Tab 1
 
            

            当我在自己的浏览器中浏览该文件时，我看到类似 图 1 的某些内容。 
            
图 1. 初始选项卡页
 

            然后，当我单击第二个选项卡时，我会看到如 图 2 所示的内容。 
            
图 2. 单击第二个选项卡之后
 

            
             
              
                 选项卡式窗口的现场演示
 要在真实的环境中查看选项卡式窗口示例，请 观看此在线演示。
 
 
            您可以通过对内容使用隐藏的 <div> 标签，然后关闭其可见性来实现此功能。此 Ajax 方法的优势在于仅在必要时创建和加载内容。因此，如果用户选择不查看内容，则构建内容的计算时间将会减少或消除。 
            下面的三个示例是使用 Ajax 技巧（或类似于 Ajax 的某种技术)处理表格的所有方法。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            使用 Ajax 的基本表格
            我的第一个使用 Ajax 构建表格的演示是，通过 Ajax 向服务器发送 XML 请求，此技巧的价值是双重的。首先，它根据需要加载数据，并且可以适当地更新，这使得用户体验非常愉快。其次，该技巧需要一个 XML 数据源，该数据源不仅对 Ajax 代码有用，它对于希望通过 XML 使用您的数据的任何客户端都非常有价值。 
            清单 3 显示了 XML 驱动的表格示例代码。
            
清单 3. index.html

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table id="books">
</table>
<script>
new Ajax.Request( 'books.xml', { 
  method: 'get',
  onSuccess: function( transport ) {
    var bookTags = transport.responseXML.getElementsByTagName( 'book' );

    for( var b = 0; b < bookTags.length; b++ ) {
      var author = bookTags[b].getElementsByTagName('author')[0].firstChild.nodeValue;
      var title = bookTags[b].getElementsByTagName('title')[0].firstChild.nodeValue;
      var publisher = 
          bookTags[b].getElementsByTagName('publisher')[0].firstChild.nodeValue;

      var elTR = $('books').insertRow( -1 );
      var elTD1 = elTR.insertCell( -1 );
      elTD1.innerHTML = author;
      var elTD2 = elTR.insertCell( -1 );
      elTD2.innerHTML = title;
      var elTD3 = elTR.insertCell( -1 );
      elTD3.innerHTML = publisher;
    }
  }
} );
</script>
</body>
</html>
 
            

            
             
              
                 使用 Ajax 的基本表格的现场演示
 要在真实环境中查看基本表格示例，请 观看此在线演示。
 
 
            Ajax.Request 调用的 onSuccess 处理程序首先获取每个 book 元素，分解 XML 数据。然后，它从嵌入的标签中获取 author、 title 和 publisher 值。最后，它对每个 book 使用 insertRow 和 insertCell 将数据添加到表格中。 
            清单 4 显示了本示例的 XML 代码。
            
清单 4. books.xml

            
             
                              
<books>
  <book>
    <author>Jack Herrington</author>
    <title>Code Generation In Action</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>Podcasting Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
</books>
 
            

            图 3 显示了生成的 DHTML 文件。
            
图 3. XML 驱动的表格页
 

            本示例非常适合于小型结果集，但对于较大的结果集会怎样呢？
            

            
             
             

            
             
             
 
                 
回页首
 
            


            使用 Ajax 的分页表格
            为了使用 Ajax 创建分页表格，我介绍一种稍有不同的技巧。这并不是因为 我必须使用这种技术 — 我可以轻松扩展上述 XML 技巧 — 但我希望本文中的这些示例可以向您展示各种技巧，您可以从中选择适合您的应用程序需求的技巧。 
            在本例中，我使用一个 PHP 数据源，该数据源提供了分页表格的各个页面的 HTML 代码块。此 HTML 代码以 清单 5 开始。 
            
清单 5. index.html

            
             
                              
<html>
   <head>
   <script src="prototype.js"></script>
   </head>
   <body>
   <div>
   <a href="javascript:void updateTable(0);">1</a> |
   <a href="javascript:void updateTable(1);">2</a> |
   <a href="javascript:void updateTable(2);">3</a> |
   <a href="javascript:void updateTable(3);">4</a> |
   <a href="javascript:void updateTable(4);">5</a> |
   <a href="javascript:void updateTable(5);">6</a>
   </div>
   <div id="states">
   </div>
   <script>
   function updateTable( start ) {
      new Ajax.Updater( 'states', 'stats.php?start='+(start*10)+'&count=10', 
      { method: 'get' } );
   }
   updateTable( 0 );
   </script>
   </body>
</html>
 
            

            大多数页面都位于指向表格的各种页面的链接中。然后，states <div> 标签收到来自 stats.php 页面的表格内容。 
            为了运行多页面的示例，我需要一个较大的数据集，因此我找到了一些美国人口统计信息并创建了一个 PHP 函数 getdata，该函数返回一个数组，其中包含这些年来各个州及其人口。清单 6 显示了该函数的一段摘录。
            
清单 6. data.php

            
             
                              
<?php
function getdata()
{
   $population = array();
   $population []= 
       array( 'Alabama',4447100,4527166,4596330,4663111,4728915,4800092,4874243 );
   $population []= array( 'Alaska',626932,661110,694109,732544,774421,820881,867674 );
...
   $population []= array( 'Wyoming',493782,507268,519886,528005,530948,529031,522979 );
   return $population;
}
?>
 
            

            现在，为了获得数据的各个部分，我创建了一个 stats.php 页面，该页面提供了一个开始和结束索引， 返回一个只包含该部分数据的 HTML 表格。清单 7 显示了该文件。 
            
清单 7. stats.php

            
             
              ___FCKpd___6
 
            

            当我在自己的浏览器中浏览该页面时，如 图 4 所示，它将自动加载第一个页面。 
            
图 4. 分页表格显示
 

            当我单击表格的各个部分时，stats.php 中的表格会动态地加载。图 5 显示了当我单击数据的第二页时发生的情况。 
            
图 5. 分页表格显示的第二页 
 

            
             
              
                 使用 Ajax 的分页表格的现场演示
 要在真实环境中查看页面表格示例，请 观看此在线演示。
 
 
            该技巧类似于我对选项卡所使用的技巧。通过 Ajax 传递 HTML 通常与 XML 一样有效。并且更容易在浏览器上实现，因为 XML 不需要被解析并再次转换回 HTML。 
            我演示的第三种表格构建技巧是动态构建表格的最容易的非 Ajax 方法。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            隐藏的分页表格
            清单 8 中的页面显示了在没有 Ajax 作为后端的情况下创建分页表格的一种简单技巧。 
            
清单 8. index.php

            
             
              ___FCKpd___7
 
            

            在本例中，我使用 PHP 代码创建了一系列 <div> 标记 — 一个标记用于表格中的一个页面。默认情况下显示第一个标记，而隐藏其他标记。updateTable 函数根据选择的页面显示或隐藏表格的各个部分。 
            
             
              
                 隐藏的分页表格的现场演示
 要在真实环境中查看隐藏的分页表格示例，请 观看此在线演示。
 
 
            注意，我仍然包含了 Prototype.js 库 — 并非因为 Ajax 支持。我只是希望使用以下方法更容易获得每个 <div> 元素：$() 方法以及 show 和 hide 方法，所有这些方法都能够由这个库来实现。 
            图 6 显示了这个页面。
            
图 6. 模拟页面表格显示
 

            最后一个 Ajax 示例显示了一个滑动块控件。滑动块 是一种新的显示形式， 当显示的页面发生变化时，它会提供动态的左/右运动。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            滑动块
            为了启用滑动块效果，我需要另外几个库。第一个库是 Scriptaculous 库，该库构建在 Prototype.js 之上。它提供滑动块使用的效果。第二个库是 Glider 库。 
            清单 9 显示了一个滑动块示例。
            
清单 9. index.html

            
             
              ___FCKpd___8
 
            

            
             
              
                 滑动块效果的现场演示
 要在真实环境中查看滑动块示例，请  观看此在线演示。
 
 
            在该文件的顶部包含了各种脚本库。然后还有滑动块 <div>，它包含一个名为 controls 的 <div> 和一个名为 scroller 的 <div>，前者具有指向每个选项卡的锚标签 ，而后者包含每个选项卡的内容。底部的脚本创建一个 Glider 对象，该对象具有滑动块 <div> 元素的 ID。 
            当我在自己的浏览器中打开此页面时，我看到类似于 图 7 所示的内容。
            
图 7. 使用滑动块实现的选项卡示例 
 

            当我单击另一个选项卡时，内容便逐字地向其滑动。
            

            
             
             

            
             
             
 
                 
回页首
 
            


            结束语
            在本文中，我介绍了一些不同类型的界面元素，它们可以使用 Ajax、PHP 和 Prototype.js 库构建。希望您能够采纳其中的一些建议，并将其用于您自己的 Web 应用程序。它们非常容易，并且 Prototype.js 库确实使 Ajax 更加灵活。如果您愿意分享您的成功经历，请加入 developerWorks Ajax 论坛：我们非常愿意倾听您的建议。 
            


            参考资料 
            学习

            
             
             您可以参阅本文在 develperWorks 全球网站上的 英文原文。

Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 

PHP 主页：为 PHP 程序员提供了宝贵的资源。

Prototype 库：了解这个用于简化动态 Web 应用程序开发的 JavaScript Framework。

Scriptaculous JavaScript 库：查找一些显示帮助器和特效，使用这个基于 Prototype 的框架改善您的 Web 站点。

Prototype.js 文档页：访问官方 Prototype blog 和其他很多资源的链接，获得关于 Prototype JavaScript 库的更多信息。

jQuery：探索另一个 JavaScript 库，它提供了与 Prototype.js 类似的功能。

Yahoo! User Interface Library：查看 Yahoo! 的 Ajax 工具箱。

滑动块控件：在选项卡样式的交互操作上添加新特性。

IBM XML 认证：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。

XML 技术库：developerWorks XML 专区，获取大量技术文章和技巧、教程、标准和 IBM 红皮书。

developerWorks 技术事件和网络广播：随时关注这些领域的技术进展。

The 技术书店 ：浏览有关这些以及其他技术主题的书籍。
            
 
GET['start'];
if ( array_key_exists( 'count', 
         
         
            使用 Ajax 构建表格、选项卡和滑动块
            

         
         
            级别： 中级
            Jack D Herrington (jherr@pobox.com), 高级软件工程师, Leverage Software Inc.

            2008 年 4 月 02 日
            
             
             
            
              
              Asynchronous JavaScript™ + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术，探索将 Ajax 用于动态数据显示的多种技巧。
            
              
              访问 Ajax 技术资源中心，developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 
            
             
             
             
             
             
             
             
             
            当人们想到 Ajax 和 Web 2.0 时，他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好， 无需页面刷新，这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载，就是拥有最快的连接速度，也能够发现上下文的变化。 
            
             
              
                 常用的缩写词
 
                     DHTML：动态 HTML 
HTML：超文本标记语言 
XSLT：可扩展样式表语言转换 
 
 
            在本文中，我将介绍多种技巧 — 包括使用 Ajax 和不使用的技巧 — 演示了用户体验设计中自由改变上下文的方法。我将从最简单的 Ajax 用户体验示例（即选项卡式窗口）开始。 
            选项卡式窗口
            选项卡是将大量数据放置在相对少量的固定区域中的最简单方法。并且优秀的 Prototype.js JavaScript 库使得在动态 HTML (DHTML) 中构建支持 Ajax 的选项卡式窗口非常容易，如 清单 1 所示。要了解有关 Prototype 库的更多信息并下载它的副本以供使用，请参阅 参考资料。 
            
清单 1. index.html

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<a href="javascript:void loadTab( 'tab1.html' )">Tab 1</a> |
<a href="javascript:void loadTab( 'tab2.html' )">Tab 2</a> |
<a href="javascript:void loadTab( 'tab3.html' )">Tab 3</a>
<div id="content" style="padding:5px;border:2px solid black;">
</div>
<script>
function loadTab( tab ) { 
  new Ajax.Updater( 'content', tab, { method: 'get' } );
}
loadTab( 'tab1.html' );
</script>
</body>
</html>
 
            

            在该文件的顶部，我包含了 Prototype.js 库，它处理所有 Ajax 工作。然后，您会看到一个到各个页面的链接列表，每个链接都调用 loadTab 来更新页面的内容区域。内容区域是一个 <div>，其 ID 为 content。loadTab 函数 调用 Ajax.Updater 来用指定的 HTML 文件更新内容 <div>。 
            清单 2 显示第一个选项卡 HTML 文件。所有其他文件 都类似于该文件。 
            
清单 2. tab1.html

            
             
                              
Tab 1
 
            

            当我在自己的浏览器中浏览该文件时，我看到类似 图 1 的某些内容。 
            
图 1. 初始选项卡页
 

            然后，当我单击第二个选项卡时，我会看到如 图 2 所示的内容。 
            
图 2. 单击第二个选项卡之后
 

            
             
              
                 选项卡式窗口的现场演示
 要在真实的环境中查看选项卡式窗口示例，请 观看此在线演示。
 
 
            您可以通过对内容使用隐藏的 <div> 标签，然后关闭其可见性来实现此功能。此 Ajax 方法的优势在于仅在必要时创建和加载内容。因此，如果用户选择不查看内容，则构建内容的计算时间将会减少或消除。 
            下面的三个示例是使用 Ajax 技巧（或类似于 Ajax 的某种技术)处理表格的所有方法。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            使用 Ajax 的基本表格
            我的第一个使用 Ajax 构建表格的演示是，通过 Ajax 向服务器发送 XML 请求，此技巧的价值是双重的。首先，它根据需要加载数据，并且可以适当地更新，这使得用户体验非常愉快。其次，该技巧需要一个 XML 数据源，该数据源不仅对 Ajax 代码有用，它对于希望通过 XML 使用您的数据的任何客户端都非常有价值。 
            清单 3 显示了 XML 驱动的表格示例代码。
            
清单 3. index.html

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table id="books">
</table>
<script>
new Ajax.Request( 'books.xml', { 
  method: 'get',
  onSuccess: function( transport ) {
    var bookTags = transport.responseXML.getElementsByTagName( 'book' );

    for( var b = 0; b < bookTags.length; b++ ) {
      var author = bookTags[b].getElementsByTagName('author')[0].firstChild.nodeValue;
      var title = bookTags[b].getElementsByTagName('title')[0].firstChild.nodeValue;
      var publisher = 
          bookTags[b].getElementsByTagName('publisher')[0].firstChild.nodeValue;

      var elTR = $('books').insertRow( -1 );
      var elTD1 = elTR.insertCell( -1 );
      elTD1.innerHTML = author;
      var elTD2 = elTR.insertCell( -1 );
      elTD2.innerHTML = title;
      var elTD3 = elTR.insertCell( -1 );
      elTD3.innerHTML = publisher;
    }
  }
} );
</script>
</body>
</html>
 
            

            
             
              
                 使用 Ajax 的基本表格的现场演示
 要在真实环境中查看基本表格示例，请 观看此在线演示。
 
 
            Ajax.Request 调用的 onSuccess 处理程序首先获取每个 book 元素，分解 XML 数据。然后，它从嵌入的标签中获取 author、 title 和 publisher 值。最后，它对每个 book 使用 insertRow 和 insertCell 将数据添加到表格中。 
            清单 4 显示了本示例的 XML 代码。
            
清单 4. books.xml

            
             
                              
<books>
  <book>
    <author>Jack Herrington</author>
    <title>Code Generation In Action</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>Podcasting Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
</books>
 
            

            图 3 显示了生成的 DHTML 文件。
            
图 3. XML 驱动的表格页
 

            本示例非常适合于小型结果集，但对于较大的结果集会怎样呢？
            

            
             
             

            
             
             
 
                 
回页首
 
            


            使用 Ajax 的分页表格
            为了使用 Ajax 创建分页表格，我介绍一种稍有不同的技巧。这并不是因为 我必须使用这种技术 — 我可以轻松扩展上述 XML 技巧 — 但我希望本文中的这些示例可以向您展示各种技巧，您可以从中选择适合您的应用程序需求的技巧。 
            在本例中，我使用一个 PHP 数据源，该数据源提供了分页表格的各个页面的 HTML 代码块。此 HTML 代码以 清单 5 开始。 
            
清单 5. index.html

            
             
                              
<html>
   <head>
   <script src="prototype.js"></script>
   </head>
   <body>
   <div>
   <a href="javascript:void updateTable(0);">1</a> |
   <a href="javascript:void updateTable(1);">2</a> |
   <a href="javascript:void updateTable(2);">3</a> |
   <a href="javascript:void updateTable(3);">4</a> |
   <a href="javascript:void updateTable(4);">5</a> |
   <a href="javascript:void updateTable(5);">6</a>
   </div>
   <div id="states">
   </div>
   <script>
   function updateTable( start ) {
      new Ajax.Updater( 'states', 'stats.php?start='+(start*10)+'&count=10', 
      { method: 'get' } );
   }
   updateTable( 0 );
   </script>
   </body>
</html>
 
            

            大多数页面都位于指向表格的各种页面的链接中。然后，states <div> 标签收到来自 stats.php 页面的表格内容。 
            为了运行多页面的示例，我需要一个较大的数据集，因此我找到了一些美国人口统计信息并创建了一个 PHP 函数 getdata，该函数返回一个数组，其中包含这些年来各个州及其人口。清单 6 显示了该函数的一段摘录。
            
清单 6. data.php

            
             
                              
<?php
function getdata()
{
   $population = array();
   $population []= 
       array( 'Alabama',4447100,4527166,4596330,4663111,4728915,4800092,4874243 );
   $population []= array( 'Alaska',626932,661110,694109,732544,774421,820881,867674 );
...
   $population []= array( 'Wyoming',493782,507268,519886,528005,530948,529031,522979 );
   return $population;
}
?>
 
            

            现在，为了获得数据的各个部分，我创建了一个 stats.php 页面，该页面提供了一个开始和结束索引， 返回一个只包含该部分数据的 HTML 表格。清单 7 显示了该文件。 
            
清单 7. stats.php

            
             
              ___FCKpd___6
 
            

            当我在自己的浏览器中浏览该页面时，如 图 4 所示，它将自动加载第一个页面。 
            
图 4. 分页表格显示
 

            当我单击表格的各个部分时，stats.php 中的表格会动态地加载。图 5 显示了当我单击数据的第二页时发生的情况。 
            
图 5. 分页表格显示的第二页 
 

            
             
              
                 使用 Ajax 的分页表格的现场演示
 要在真实环境中查看页面表格示例，请 观看此在线演示。
 
 
            该技巧类似于我对选项卡所使用的技巧。通过 Ajax 传递 HTML 通常与 XML 一样有效。并且更容易在浏览器上实现，因为 XML 不需要被解析并再次转换回 HTML。 
            我演示的第三种表格构建技巧是动态构建表格的最容易的非 Ajax 方法。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            隐藏的分页表格
            清单 8 中的页面显示了在没有 Ajax 作为后端的情况下创建分页表格的一种简单技巧。 
            
清单 8. index.php

            
             
              ___FCKpd___7
 
            

            在本例中，我使用 PHP 代码创建了一系列 <div> 标记 — 一个标记用于表格中的一个页面。默认情况下显示第一个标记，而隐藏其他标记。updateTable 函数根据选择的页面显示或隐藏表格的各个部分。 
            
             
              
                 隐藏的分页表格的现场演示
 要在真实环境中查看隐藏的分页表格示例，请 观看此在线演示。
 
 
            注意，我仍然包含了 Prototype.js 库 — 并非因为 Ajax 支持。我只是希望使用以下方法更容易获得每个 <div> 元素：$() 方法以及 show 和 hide 方法，所有这些方法都能够由这个库来实现。 
            图 6 显示了这个页面。
            
图 6. 模拟页面表格显示
 

            最后一个 Ajax 示例显示了一个滑动块控件。滑动块 是一种新的显示形式， 当显示的页面发生变化时，它会提供动态的左/右运动。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            滑动块
            为了启用滑动块效果，我需要另外几个库。第一个库是 Scriptaculous 库，该库构建在 Prototype.js 之上。它提供滑动块使用的效果。第二个库是 Glider 库。 
            清单 9 显示了一个滑动块示例。
            
清单 9. index.html

            
             
              ___FCKpd___8
 
            

            
             
              
                 滑动块效果的现场演示
 要在真实环境中查看滑动块示例，请  观看此在线演示。
 
 
            在该文件的顶部包含了各种脚本库。然后还有滑动块 <div>，它包含一个名为 controls 的 <div> 和一个名为 scroller 的 <div>，前者具有指向每个选项卡的锚标签 ，而后者包含每个选项卡的内容。底部的脚本创建一个 Glider 对象，该对象具有滑动块 <div> 元素的 ID。 
            当我在自己的浏览器中打开此页面时，我看到类似于 图 7 所示的内容。
            
图 7. 使用滑动块实现的选项卡示例 
 

            当我单击另一个选项卡时，内容便逐字地向其滑动。
            

            
             
             

            
             
             
 
                 
回页首
 
            


            结束语
            在本文中，我介绍了一些不同类型的界面元素，它们可以使用 Ajax、PHP 和 Prototype.js 库构建。希望您能够采纳其中的一些建议，并将其用于您自己的 Web 应用程序。它们非常容易，并且 Prototype.js 库确实使 Ajax 更加灵活。如果您愿意分享您的成功经历，请加入 developerWorks Ajax 论坛：我们非常愿意倾听您的建议。 
            


            参考资料 
            学习

            
             
             您可以参阅本文在 develperWorks 全球网站上的 英文原文。

Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 

PHP 主页：为 PHP 程序员提供了宝贵的资源。

Prototype 库：了解这个用于简化动态 Web 应用程序开发的 JavaScript Framework。

Scriptaculous JavaScript 库：查找一些显示帮助器和特效，使用这个基于 Prototype 的框架改善您的 Web 站点。

Prototype.js 文档页：访问官方 Prototype blog 和其他很多资源的链接，获得关于 Prototype JavaScript 库的更多信息。

jQuery：探索另一个 JavaScript 库，它提供了与 Prototype.js 类似的功能。

Yahoo! User Interface Library：查看 Yahoo! 的 Ajax 工具箱。

滑动块控件：在选项卡样式的交互操作上添加新特性。

IBM XML 认证：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。

XML 技术库：developerWorks XML 专区，获取大量技术文章和技巧、教程、标准和 IBM 红皮书。

developerWorks 技术事件和网络广播：随时关注这些领域的技术进展。

The 技术书店 ：浏览有关这些以及其他技术主题的书籍。
            
 
GET ) ) $count = 
         
         
            使用 Ajax 构建表格、选项卡和滑动块
            

         
         
            级别： 中级
            Jack D Herrington (jherr@pobox.com), 高级软件工程师, Leverage Software Inc.

            2008 年 4 月 02 日
            
             
             
            
              
              Asynchronous JavaScript™ + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术，探索将 Ajax 用于动态数据显示的多种技巧。
            
              
              访问 Ajax 技术资源中心，developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 
            
             
             
             
             
             
             
             
             
            当人们想到 Ajax 和 Web 2.0 时，他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好， 无需页面刷新，这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载，就是拥有最快的连接速度，也能够发现上下文的变化。 
            
             
              
                 常用的缩写词
 
                     DHTML：动态 HTML 
HTML：超文本标记语言 
XSLT：可扩展样式表语言转换 
 
 
            在本文中，我将介绍多种技巧 — 包括使用 Ajax 和不使用的技巧 — 演示了用户体验设计中自由改变上下文的方法。我将从最简单的 Ajax 用户体验示例（即选项卡式窗口）开始。 
            选项卡式窗口
            选项卡是将大量数据放置在相对少量的固定区域中的最简单方法。并且优秀的 Prototype.js JavaScript 库使得在动态 HTML (DHTML) 中构建支持 Ajax 的选项卡式窗口非常容易，如 清单 1 所示。要了解有关 Prototype 库的更多信息并下载它的副本以供使用，请参阅 参考资料。 
            
清单 1. index.html

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<a href="javascript:void loadTab( 'tab1.html' )">Tab 1</a> |
<a href="javascript:void loadTab( 'tab2.html' )">Tab 2</a> |
<a href="javascript:void loadTab( 'tab3.html' )">Tab 3</a>
<div id="content" style="padding:5px;border:2px solid black;">
</div>
<script>
function loadTab( tab ) { 
  new Ajax.Updater( 'content', tab, { method: 'get' } );
}
loadTab( 'tab1.html' );
</script>
</body>
</html>
 
            

            在该文件的顶部，我包含了 Prototype.js 库，它处理所有 Ajax 工作。然后，您会看到一个到各个页面的链接列表，每个链接都调用 loadTab 来更新页面的内容区域。内容区域是一个 <div>，其 ID 为 content。loadTab 函数 调用 Ajax.Updater 来用指定的 HTML 文件更新内容 <div>。 
            清单 2 显示第一个选项卡 HTML 文件。所有其他文件 都类似于该文件。 
            
清单 2. tab1.html

            
             
                              
Tab 1
 
            

            当我在自己的浏览器中浏览该文件时，我看到类似 图 1 的某些内容。 
            
图 1. 初始选项卡页
 

            然后，当我单击第二个选项卡时，我会看到如 图 2 所示的内容。 
            
图 2. 单击第二个选项卡之后
 

            
             
              
                 选项卡式窗口的现场演示
 要在真实的环境中查看选项卡式窗口示例，请 观看此在线演示。
 
 
            您可以通过对内容使用隐藏的 <div> 标签，然后关闭其可见性来实现此功能。此 Ajax 方法的优势在于仅在必要时创建和加载内容。因此，如果用户选择不查看内容，则构建内容的计算时间将会减少或消除。 
            下面的三个示例是使用 Ajax 技巧（或类似于 Ajax 的某种技术)处理表格的所有方法。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            使用 Ajax 的基本表格
            我的第一个使用 Ajax 构建表格的演示是，通过 Ajax 向服务器发送 XML 请求，此技巧的价值是双重的。首先，它根据需要加载数据，并且可以适当地更新，这使得用户体验非常愉快。其次，该技巧需要一个 XML 数据源，该数据源不仅对 Ajax 代码有用，它对于希望通过 XML 使用您的数据的任何客户端都非常有价值。 
            清单 3 显示了 XML 驱动的表格示例代码。
            
清单 3. index.html

            
             
                              
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table id="books">
</table>
<script>
new Ajax.Request( 'books.xml', { 
  method: 'get',
  onSuccess: function( transport ) {
    var bookTags = transport.responseXML.getElementsByTagName( 'book' );

    for( var b = 0; b < bookTags.length; b++ ) {
      var author = bookTags[b].getElementsByTagName('author')[0].firstChild.nodeValue;
      var title = bookTags[b].getElementsByTagName('title')[0].firstChild.nodeValue;
      var publisher = 
          bookTags[b].getElementsByTagName('publisher')[0].firstChild.nodeValue;

      var elTR = $('books').insertRow( -1 );
      var elTD1 = elTR.insertCell( -1 );
      elTD1.innerHTML = author;
      var elTD2 = elTR.insertCell( -1 );
      elTD2.innerHTML = title;
      var elTD3 = elTR.insertCell( -1 );
      elTD3.innerHTML = publisher;
    }
  }
} );
</script>
</body>
</html>
 
            

            
             
              
                 使用 Ajax 的基本表格的现场演示
 要在真实环境中查看基本表格示例，请 观看此在线演示。
 
 
            Ajax.Request 调用的 onSuccess 处理程序首先获取每个 book 元素，分解 XML 数据。然后，它从嵌入的标签中获取 author、 title 和 publisher 值。最后，它对每个 book 使用 insertRow 和 insertCell 将数据添加到表格中。 
            清单 4 显示了本示例的 XML 代码。
            
清单 4. books.xml

            
             
                              
<books>
  <book>
    <author>Jack Herrington</author>
    <title>Code Generation In Action</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>Podcasting Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
</books>
 
            

            图 3 显示了生成的 DHTML 文件。
            
图 3. XML 驱动的表格页
 

            本示例非常适合于小型结果集，但对于较大的结果集会怎样呢？
            

            
             
             

            
             
             
 
                 
回页首
 
            


            使用 Ajax 的分页表格
            为了使用 Ajax 创建分页表格，我介绍一种稍有不同的技巧。这并不是因为 我必须使用这种技术 — 我可以轻松扩展上述 XML 技巧 — 但我希望本文中的这些示例可以向您展示各种技巧，您可以从中选择适合您的应用程序需求的技巧。 
            在本例中，我使用一个 PHP 数据源，该数据源提供了分页表格的各个页面的 HTML 代码块。此 HTML 代码以 清单 5 开始。 
            
清单 5. index.html

            
             
                              
<html>
   <head>
   <script src="prototype.js"></script>
   </head>
   <body>
   <div>
   <a href="javascript:void updateTable(0);">1</a> |
   <a href="javascript:void updateTable(1);">2</a> |
   <a href="javascript:void updateTable(2);">3</a> |
   <a href="javascript:void updateTable(3);">4</a> |
   <a href="javascript:void updateTable(4);">5</a> |
   <a href="javascript:void updateTable(5);">6</a>
   </div>
   <div id="states">
   </div>
   <script>
   function updateTable( start ) {
      new Ajax.Updater( 'states', 'stats.php?start='+(start*10)+'&count=10', 
      { method: 'get' } );
   }
   updateTable( 0 );
   </script>
   </body>
</html>
 
            

            大多数页面都位于指向表格的各种页面的链接中。然后，states <div> 标签收到来自 stats.php 页面的表格内容。 
            为了运行多页面的示例，我需要一个较大的数据集，因此我找到了一些美国人口统计信息并创建了一个 PHP 函数 getdata，该函数返回一个数组，其中包含这些年来各个州及其人口。清单 6 显示了该函数的一段摘录。
            
清单 6. data.php

            
             
                              
<?php
function getdata()
{
   $population = array();
   $population []= 
       array( 'Alabama',4447100,4527166,4596330,4663111,4728915,4800092,4874243 );
   $population []= array( 'Alaska',626932,661110,694109,732544,774421,820881,867674 );
...
   $population []= array( 'Wyoming',493782,507268,519886,528005,530948,529031,522979 );
   return $population;
}
?>
 
            

            现在，为了获得数据的各个部分，我创建了一个 stats.php 页面，该页面提供了一个开始和结束索引， 返回一个只包含该部分数据的 HTML 表格。清单 7 显示了该文件。 
            
清单 7. stats.php

            
             
              ___FCKpd___6
 
            

            当我在自己的浏览器中浏览该页面时，如 图 4 所示，它将自动加载第一个页面。 
            
图 4. 分页表格显示
 

            当我单击表格的各个部分时，stats.php 中的表格会动态地加载。图 5 显示了当我单击数据的第二页时发生的情况。 
            
图 5. 分页表格显示的第二页 
 

            
             
              
                 使用 Ajax 的分页表格的现场演示
 要在真实环境中查看页面表格示例，请 观看此在线演示。
 
 
            该技巧类似于我对选项卡所使用的技巧。通过 Ajax 传递 HTML 通常与 XML 一样有效。并且更容易在浏览器上实现，因为 XML 不需要被解析并再次转换回 HTML。 
            我演示的第三种表格构建技巧是动态构建表格的最容易的非 Ajax 方法。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            隐藏的分页表格
            清单 8 中的页面显示了在没有 Ajax 作为后端的情况下创建分页表格的一种简单技巧。 
            
清单 8. index.php

            
             
              ___FCKpd___7
 
            

            在本例中，我使用 PHP 代码创建了一系列 <div> 标记 — 一个标记用于表格中的一个页面。默认情况下显示第一个标记，而隐藏其他标记。updateTable 函数根据选择的页面显示或隐藏表格的各个部分。 
            
             
              
                 隐藏的分页表格的现场演示
 要在真实环境中查看隐藏的分页表格示例，请 观看此在线演示。
 
 
            注意，我仍然包含了 Prototype.js 库 — 并非因为 Ajax 支持。我只是希望使用以下方法更容易获得每个 <div> 元素：$() 方法以及 show 和 hide 方法，所有这些方法都能够由这个库来实现。 
            图 6 显示了这个页面。
            
图 6. 模拟页面表格显示
 

            最后一个 Ajax 示例显示了一个滑动块控件。滑动块 是一种新的显示形式， 当显示的页面发生变化时，它会提供动态的左/右运动。 
            

            
             
             

            
             
             
 
                 
回页首
 
            


            滑动块
            为了启用滑动块效果，我需要另外几个库。第一个库是 Scriptaculous 库，该库构建在 Prototype.js 之上。它提供滑动块使用的效果。第二个库是 Glider 库。 
            清单 9 显示了一个滑动块示例。
            
清单 9. index.html

            
             
              ___FCKpd___8
 
            

            
             
              
                 滑动块效果的现场演示
 要在真实环境中查看滑动块示例，请  观看此在线演示。
 
 
            在该文件的顶部包含了各种脚本库。然后还有滑动块 <div>，它包含一个名为 controls 的 <div> 和一个名为 scroller 的 <div>，前者具有指向每个选项卡的锚标签 ，而后者包含每个选项卡的内容。底部的脚本创建一个 Glider 对象，该对象具有滑动块 <div> 元素的 ID。 
            当我在自己的浏览器中打开此页面时，我看到类似于 图 7 所示的内容。
            
图 7. 使用滑动块实现的选项卡示例 
 

            当我单击另一个选项卡时，内容便逐字地向其滑动。
            

            
             
             

            
             
             
 
                 
回页首
 
            


            结束语
            在本文中，我介绍了一些不同类型的界面元素，它们可以使用 Ajax、PHP 和 Prototype.js 库构建。希望您能够采纳其中的一些建议，并将其用于您自己的 Web 应用程序。它们非常容易，并且 Prototype.js 库确实使 Ajax 更加灵活。如果您愿意分享您的成功经历，请加入 developerWorks Ajax 论坛：我们非常愿意倾听您的建议。 
            


            参考资料 
            学习

            
             
             您可以参阅本文在 develperWorks 全球网站上的 英文原文。

Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。 

PHP 主页：为 PHP 程序员提供了宝贵的资源。

Prototype 库：了解这个用于简化动态 Web 应用程序开发的 JavaScript Framework。

Scriptaculous JavaScript 库：查找一些显示帮助器和特效，使用这个基于 Prototype 的框架改善您的 Web 站点。

Prototype.js 文档页：访问官方 Prototype blog 和其他很多资源的链接，获得关于 Prototype JavaScript 库的更多信息。

jQuery：探索另一个 JavaScript 库，它提供了与 Prototype.js 类似的功能。

Yahoo! User Interface Library：查看 Yahoo! 的 Ajax 工具箱。

滑动块控件：在选项卡样式的交互操作上添加新特性。

IBM XML 认证：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。

XML 技术库：developerWorks XML 专区，获取大量技术文章和技巧、教程、标准和 IBM 红皮书。

developerWorks 技术事件和网络广播：随时关注这些领域的技术进展。

The 技术书店 ：浏览有关这些以及其他技术主题的书籍。
            
 
GET['count'];
   $index = 0;
foreach( $data as $state ) {
if ( $index >= $start && $index < $start + $count ) {
?>
<tr>
<?php
foreach( $state as $item ) {
?>
<td><?php echo($item); ?></td>
<?php
}
?>
</tr>
<?php
}
$index += 1;
}
?>
</table>

当我在自己的浏览器中浏览该页面时，如图 4 所示，它将自动加载第一个页面。

图 4. 分页表格显示

当我单击表格的各个部分时，stats.php 中的表格会动态地加载。图 5 显示了当我单击数据的第二页时发生的情况。

图 5. 分页表格显示的第二页

使用 Ajax 的分页表格的现场演示

要在真实环境中查看页面表格示例，请观看此在线演示。

该技巧类似于我对选项卡所使用的技巧。通过 Ajax 传递 HTML 通常与 XML 一样有效。并且更容易在浏览器上实现，因为 XML 不需要被解析并再次转换回 HTML。

我演示的第三种表格构建技巧是动态构建表格的最容易的非 Ajax 方法。

回页首

隐藏的分页表格

清单 8 中的页面显示了在没有 Ajax 作为后端的情况下创建分页表格的一种简单技巧。

清单 8. index.php

___FCKpd___7

在本例中，我使用 PHP 代码创建了一系列 <div> 标记 — 一个标记用于表格中的一个页面。默认情况下显示第一个标记，而隐藏其他标记。updateTable 函数根据选择的页面显示或隐藏表格的各个部分。

隐藏的分页表格的现场演示

要在真实环境中查看隐藏的分页表格示例，请观看此在线演示。

注意，我仍然包含了 Prototype.js 库 — 并非因为 Ajax 支持。我只是希望使用以下方法更容易获得每个 <div> 元素：$() 方法以及 show 和 hide 方法，所有这些方法都能够由这个库来实现。

图 6 显示了这个页面。

图 6. 模拟页面表格显示

最后一个 Ajax 示例显示了一个滑动块控件。滑动块 是一种新的显示形式，当显示的页面发生变化时，它会提供动态的左/右运动。

回页首

滑动块

为了启用滑动块效果，我需要另外几个库。第一个库是 Scriptaculous 库，该库构建在 Prototype.js 之上。它提供滑动块使用的效果。第二个库是 Glider 库。

清单 9 显示了一个滑动块示例。

清单 9. index.html

___FCKpd___8

滑动块效果的现场演示

要在真实环境中查看滑动块示例，请观看此在线演示。

在该文件的顶部包含了各种脚本库。然后还有滑动块 <div>，它包含一个名为 controls 的 <div> 和一个名为 scroller 的 <div>，前者具有指向每个选项卡的锚标签，而后者包含每个选项卡的内容。底部的脚本创建一个 Glider 对象，该对象具有滑动块 <div> 元素的 ID。

当我在自己的浏览器中打开此页面时，我看到类似于图 7 所示的内容。

图 7. 使用滑动块实现的选项卡示例

当我单击另一个选项卡时，内容便逐字地向其滑动。

回页首

结束语

在本文中，我介绍了一些不同类型的界面元素，它们可以使用 Ajax、PHP 和 Prototype.js 库构建。希望您能够采纳其中的一些建议，并将其用于您自己的 Web 应用程序。它们非常容易，并且 Prototype.js 库确实使 Ajax 更加灵活。如果您愿意分享您的成功经历，请加入 developerWorks Ajax 论坛：我们非常愿意倾听您的建议。

参考资料

学习

您可以参阅本文在 develperWorks 全球网站上的英文原文。
Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。
PHP 主页：为 PHP 程序员提供了宝贵的资源。
Prototype 库：了解这个用于简化动态 Web 应用程序开发的 JavaScript Framework。
Scriptaculous JavaScript 库：查找一些显示帮助器和特效，使用这个基于 Prototype 的框架改善您的 Web 站点。
Prototype.js 文档页：访问官方 Prototype blog 和其他很多资源的链接，获得关于 Prototype JavaScript 库的更多信息。
jQuery：探索另一个 JavaScript 库，它提供了与 Prototype.js 类似的功能。
Yahoo! User Interface Library：查看 Yahoo! 的 Ajax 工具箱。
滑动块控件：在选项卡样式的交互操作上添加新特性。
IBM XML 认证：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。
XML 技术库：developerWorks XML 专区，获取大量技术文章和技巧、教程、标准和 IBM 红皮书。
developerWorks 技术事件和网络广播：随时关注这些领域的技术进展。
The 技术书店：浏览有关这些以及其他技术主题的书籍。