四、实现动态滚动表格
为了实现一个动态表格，我现在已经将表格的显示部分放到了叫"scrolltable"的CSS中，将建立了一个id为"new_items_div"的div和一个id为"new_items"的table。叫"status"的div的目的是为了显示不同的信息。这段html代码如下：<div id='status'></div> <div id="new_items_div" style="height:500px;" class="scrolltable"> <table id="new_items" border="0" cellpadding="0" cellspacing="0" > <tbody> </tbody> </table> </div>
实现滚动逻辑的代码的第一部分是自动追加更多的行，这些行包括用户已经滚动过的行。为了实现这个功能，我建立了一个JavaScript函数detectScroll()，这个函数每0.5秒执行一次。除了这种方法，还可以为滚动事件建立一个处理事件的函数，并和div绑定。这个startPolling函数当整个页面装载时被调用，并开始周期性地调用detectScroll()函数。
在这个算法中，将探测滚动位置，并检查所滚动的距离是否大于等于可视区域高度。我还加了20个象素来将滚动条的尺寸计算在内，以确保滚动条可以在适当的位置出现。
如果用户在向下滚动后向上滚动，并没有新行出现，而只是将已经显示过的数据重新显示。下面是完整的JavaScript代码：
function startPolling(){ pollID = setInterval("detectScroll()",500); } function detectScroll(){ var intElemScrollHeightOuter = document.getElementById("new_items_div").clientHeight; var intElemScrollHeightInner = document.getElementById("new_items").scrollHeight; var intElemScrolled = document.getElementById("new_items_div").scrollTop; var height = intElemScrollHeightInner - intElemScrollHeightOuter; if (intElemScrolled >= height-20) { //alert("You are at " + document.getElementById("new_items").scrollTop + " pixels. adding rows..."); document.getElementById('status').innerHTML = "Showing <b>"+(viewCnt+5)+"</b> items"; fetchAction(viewCnt); viewCnt +=5; } return true; } fetchAction(0); startPolling(); </script>
如果当detectScroll执行时返回true。那么会有一个新的JavaScript函数fetchAction被调用。而且还需要使用整个行数来更新div的"status"。
fetchAction函数通过异步的方式访问服务器，并使用XMLHttpRequest对象来分派一个回调函数readFeed来处理服务端的响应。我们在这里不用管服务端是如何实现的，只要知道服务端返回了一个合法的XML就可以了，服务端可以使用任何语言来完成这个任务。在本例中使用了PHP来实现服务端，读者也可以根据自己的喜好使用Java或.NET。fetchAction()函数的代码如下：
function fetchAction(si) {
var xmlHttp = getXmlHttpObject();
if (xmlHttp==null) {
alert('警告，浏览器不支持XmlHttpObject()');
return;
}
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
readFeed(xmlHttp);
xmlHttp = null;
}
}
try{
url = 'fetch_items.php?ri='+(Math.floor(Math.random()*10000000))+'&si='+si;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} catch (ex){
document.getElementById("status").innerHTML = ex;
clearInterval(pollID);
}
}
