Asynchronous JavaScript? + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术，探索将 Ajax 用于动态数据显示的多种技巧。
访问 Ajax 技术资源中心，developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。
当人们想到 Ajax 和 Web 2.0 时，他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好， 无需页面刷新，这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载，就是拥有最快的连接速度，也能够发现上下文的变化。
在本文中，我将介绍多种技巧 — 包括使用 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.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 开始
本文作者:Asynchronous JavaScript? + XML (Ajax) 的一个强大功能是以动态方式向用户显示来自服务器的数据。使用表格、选项卡和滑动块等技术，探索将 Ajax 用于动态数据显示的多种技巧。
访问 Ajax 技术资源中心，developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。
当人们想到 Ajax 和 Web 2.0 时，他们通常会想起用户体验中的可视元素。它给人的感觉是工作良好， 无需页面刷新，这使 Ajax 特别引人关注。传统 HTML 应用程序的页面刷新会导致页面的闪烁并且需要重新加载，就是拥有最快的连接速度，也能够发现上下文的变化。
在本文中，我将介绍多种技巧 — 包括使用 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.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 开始
本文作者: