一、概述
在本文中將討論如何實現一個基於Ajax的可滾動的表格，在這個表格中，每一行都是從服務器動態獲得的，當用戶滾動時，整個頁並不刷新，而只是局部刷新。這項技術對於實現擁有很多動態數據的表格頁是非常有效和便利的。例如，當重表調整頁的尺寸後，表格數據將會平滑地滾動。這是由於表格中的數據是通過AJAX從服務端異步獲得的，然後由JavaScript對數據進行分析，並動態地插入每一行，而XMLHttpRequest對象用於向服務端發送請求，最後由CSS控制顯示風格。
動態滾動表格的實現主要得意於現代的瀏覽器引入了XMLHttpRequest對象。這使得JavaScript對象可以使用異步的方式向服務端發送請求，並從服務端接收響應，而這一切都不需要刷新整個網頁。更在很多的Web2.0站點都使用了很多AJAX技術來使界面變得更豐富多彩，其中XMLHttpRequest在這些站點和這些動態的網頁中被廣泛地使用。
在本文中將討論如何實現一個基於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是一個Google讀者網站的一個動態表格的例子。要注意的是在圖1的截屏上一100項記錄，通過移動垂直滾動條可看以更多的記錄，當顯示到140條時（如圖2所示），滾動條的大小開始變化 。這時，所有其他的記錄仍然保持在本頁的同樣的位置。
圖1 一個顯示100條記錄的動態滾動表單
圖2 在表單後又新加了40條記錄，注意滾動條的位置
二、如保實現動態表單
爲了使任何HTML元素（在本文中是表格）可滾動，需要使用一個可滾動的區域，在這裏是DIV，這個元素應該比表格的實際高度小。如一個DIV的高度爲100px，包含一個高度爲200px的表格，這樣纔可以使表格滾動。下面的代碼演示了div和table的使用：
<div style="height:100px; width:50px;
overflow:auto; overflow-x:hidden;">
<table style="height:200px;">
<tr><td>vlad</td></tr>
</table>
</div>
圖3 產生滾動行爲的例子代碼
要注意的是，如果我們將table和div分開寫，那麼就只有div滾動，而不是表在滾動。讓我們先看看如下的代碼：
要注意的是，如果我們將table和div分開寫，那麼就只有div滾動，而不是表在滾動。讓我們先看看如下的代碼：
<table style="height:50px; width:100px;
overflow:auto;overflow-x:hidden;">
<tr><td><p>vlad 1</p></td></tr>
<tr><td><p>vlad 2</p></td></tr>
<tr><td><p>vlad 3</p></td></tr>
<tr><td><p>vlad 4</p></td></tr>
<tr><td><p>vlad 5</p></td></tr>
</table>
<hr/>
<div style="height:100px; width:100px;
overflow:auto;overflow-x:hidden;">
<p>Vlad 1 </p>
<p>Vlad 2</p>
<p>Vlad 3</p>
<p>Vlad 4</p>
<p>Vlad 5</p>
</div>
圖4
我們注意到table的高度是50，但它仍然不滾動。
上面代碼的兩個CSS屬性：overflow auto和overflow-x:hidden，實際上是將滾動條顯示在div的右側。不過瀏覽器的CSS引擎必須支持這兩個屬性，否則，這個表將不會有滾動條。
如果div中的內容落在了div的外面，可能的原因很多，如margin爲負、使用了絕對位置、內容超過了width/height等等，而overflow和overflow-x屬性只是描述了內容超過div的寬度應該如何去做。這些CSS屬性僅僅定義了div和table的外觀，而不是帶有滾動屬性的JavaScript API接口。爲了充分理解一個動態表單的實現，我們需要知道測量HTML元素在網頁中的尺寸和位置的屬性。這些屬性可以通過JavaScript用可編程的方式來操作，更值得慶幸的是，這些API在目前的主要瀏覽器中都可以使用。
三、HTML元素屬性
圖5 Div的屬性的可視化描述
這個scrollTop屬性指定了可視區域（被div的height和width定義的）的內容的上邊界的位置，當用戶滾動時，scrollTop將確定內容移動的距離（單位是像素）。這個scrollHeight屬性指定了inner元素的實際高度（單位是像素），而clientHeight指定了可視區域的實際高度。在本文的例子中，可視區域是outer div元素，而內容是inner表。Height和Top屬性並不能解決元素的border、margin或padding，如果我們的元素有這些屬性的任何一個，可以使用其他類似的屬性代替。和height類似，由width屬性來處理水平滾動計算。
第一個被放置在頁上的元素都有這些屬性，以及使用這種方式的元素看起來都以來於這些屬性。圖6顯示了一個關於div屬性的簡單例子。
![]()
第一個被放置在頁上的元素都有這些屬性，以及使用這種方式的元素看起來都以來於這些屬性。圖6顯示了一個關於div屬性的簡單例子。
圖6 有滾動功能 的div
四、實現動態滾動表格
爲了實現一個動態表格，我現在已經將表格的顯示部分放到了叫"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);
}
}
