利用ajax實現頁面的局部刷新

在web應用中，經常變化的是數據，但爲了加載新數據就去從新加載頁面，不僅麻煩，也不友好。今天我利用ajax實現了一個頁面數據的局部刷新，效果如下：

 

表格中的信息每隔五秒後刷新，並從服務器端得到信息，加入table中。

 

下面介紹一下他的實現：

onload()函數使頁面加載時就被調用，這裏介紹一下startcallback函數，其中的

setTimeout函數是一個定時器，第一個參數設定了定時調用的函數，第二個參數設定定時間間（單位毫秒）。setTimeout("pollServer()", 5000)表示將在5秒鐘後調用pollServer函數。pollServer函數定義如下：

 

 

這也是一個需要請求服務器的ajax應用，他的作用是獲得服務器短的信息，並把它加到頁面中的表格裏

 

 

這裏遞歸調用setTimeout，表明要每隔5秒鐘都要向服務器端請求一次信息，以便更新。

同時，再次調用doStart函數表明當服務器端信息輪尋完後再從頭開始。第二個函數就不再加以說明了，僅是利用javascript操作dom。

 

接下來看一下時間提示的刷新，這個應用不需要請求服務器

 

 

再看一下body部分

 

該看一下服務器端的servlet代碼了

 

 

需要說明的只有一點，在開頭要設置response.setCharacterEncoding("UTF-8")

否則會出現返回的信息漢字亂碼

web.xml就不說了。

 

最後還要補充一句，這個例子使用了onload方法，頁面上的加載按鈕就沒什麼用了，這是你還要去點擊的話會出現刷新混亂。