用Ajax实现表格动态滚动-技术开发专区

用Ajax实现表格动态滚动

作者：IT168 seasky 编辑：李宁 2007-12-21 00:00

五、动态分析和插入数据

下面我们来对服务端返回的XML数据进行分析和动态地向table中插入数据行，下面是返回的XML的代码：

<?xml version='1.0' encoding='ISO-8859-1'?>
<channel>
   <item>
      <title>Vlad</title>
      <body><![CDATA[some text]]></body>
   </item>
</channel>

当服务端响应XML数据时，回调函数readFeed()被调用。这个函数首先获得了这个XML的handle，xmlHttp.responseXML.documentElement。然后获得这个XML的所有叫"item"的元素，并用循环扫描它们，然后去处title和body。然后将body和title传递给helper函数，由addRow函数来向表中增加数据。addRow方法可以获得table对象，在最后插入一个新行，并插入title和body HTML。下面是readFeed函数的实现：

 function readFeed(xmlHttp) {
try {
if (xmlHttp.responseText.indexOf('invalid') == -1)
{
var node = xmlHttp.responseXML.documentElement;
var items = node.getElementsByTagName('item');
if (items.length == 0){ // hmm still 0 - something is wrong with the stream
                  document.getElementById("status").innerHTML = "nothing was
returned...";
}
for (var n=0; n < items.length; n++)
{
var itemTitle = items[n].getElementsByTagName('title').item(0).firstChild.data;
var itemBody = items[n].getElementsByTagName('body').item(0).firstChild.data;
addRow("new_items",itemTitle, itemBody);
}
}
} catch (e) {
document.getElementById("status").innerHTML = e;
}
}

下面是addRow函数的实现的源代码：

 function addRow(table_id, dtitle, dbody){
pTable = document.getElementById(table_id);
row1 = pTable.insertRow(pTable.rows.length);
cell1 =  row1.insertCell(0);
cell1.innerHTML = dtitle;
cell2 = row1.insertCell(1);
cell2.innerHTML = dbody;
}

在本文的例子页中，一开始有10行，当用户向下滚动时，就会显示超过10行的数据。最终结果如下图所示：

六、结论

在本文中，为读者展现了一个基于Ajax的动态滚动表的实现。这个滚动表可以用异步的方式从服务端获取数据，并无刷新地加到表格中。这一切都是由JavaScript实现。这种实现方式的好处是将已经显示过的数据都保存在客户端，这样减小了数据在网络之间的传输。读者可以将这种技术加到自己的系统中，以实现更丰富的Web界面。

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

关注我们