Ajax 和 XML: 用于表格的 Ajax
http://tech.ddvip.com 2008年08月29日 社区交流
内容摘要：在本文中，我将介绍多种技巧 — 包括使用 Ajax 和不使用的技巧 — 演示了用户体验设计中自由改变上下文的方法。我将从最简单的 Ajax 用户体验示例（即选项卡式窗口）开始。
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>
来源：developerWorks 作者：Jack 责编：豆豆技术应用