用Ajax实现表格动态滚动

作者：IT168 seasky 2007-12-21

内容导航：

第1页：概述第2页：如保实现动态表单第3页： HTML元素属性第4页：实现动态滚动表格第5页：动态分析和插入数据

【IT168 专稿】

一、概述

在本文中将讨论如何实现一个基于Ajax的可滚动的表格，在这个表格中，每一行都是从服务器动态获得的，当用户滚动时，整个页并不刷新，而只是局部刷新。这项技术对于实现拥有很多动态数据的表格页是非常有效和便利的。例如，当重表调整页的尺寸后，表格数据将会平滑地滚动。这是由于表格中的数据是通过AJAX从服务端异步获得的，然后由JavaScript对数据进行分析，并动态地插入每一行，而XMLHttpRequest对象用于向服务端发送请求，最后由CSS控制显示风格。
动态滚动表格的实现主要得意于现代的浏览器引入了XMLHttpRequest对象。这使得JavaScript对象可以使用异步的方式向服务端发送请求，并从服务端接收响应，而这一切都不需要刷新整个网页。更在很多的Web2.0站点都使用了很多AJAX技术来使界面变得更丰富多彩，其中XMLHttpRequest在这些站点和这些动态的网页中被广泛地使用。

可滚动的表单是一个非常好的富客户端接口，它使用了Web2.0的技术来为用户展现Web内容。动态滚动技术的实现从某种程度上也取决于最新的CSS2标准的推出，这个新的CSS标准现在已经被很多流行的浏览器支持。在本文提供的代码中，我将介绍如何在屏幕的一部分实现可动态滚动的表格，但如果读者所使用的浏览器不动态最新的CSS标准，而只动态AJAX，这个动态表格将变成充满整个页面，而不是屏幕的一部分。
图1是一个Google读者网站的一个动态表格的例子。要注意的是在图1的截屏上一100项记录，通过移动垂直滚动条可看以更多的记录，当显示到140条时（如图2所示），滚动条的大小开始变化。这时，所有其他的记录仍然保持在本页的同样的位置。

图1 一个显示100条记录的动态滚动表单

图2 在表单后又新加了40条记录，注意滚动条的位置

1 2 3 4 5

【内容导航】

第1页：概述	第2页：如保实现动态表单
第3页： HTML元素属性	第4页：实现动态滚动表格
第5页：动态分析和插入数据

[责任编辑：李宁]

[an error occurred while processing this directive]