2012-02-07 72 views
0

我正在開發一個網站,它有大約6000條記錄,而我的公司使用Internet Explorer 8作爲它的默認瀏覽器(我知道......),並且它需要50秒來加載整個數據。所以我試圖每次用戶到達div的末尾時實現一個加載數據函數。在Servlet-JSP中向下滾動加載數據

基本上它的網站結構有點像這樣。 Servlet - Jsp。 基本上,當請求某個jsp時,被分配的servlet會生成一個doGet,並且每次用戶插入/編輯/刪除一條記錄時,它都會執行doPost,但每個操作始終由JSP處理。

因此,在這種情況下向下滾動時如何實現加載數據? (我想如果可能不使用頁面刷新)。

ps:我已經現在我必須爲此使用JQuery,但不知道如何實現它。 =)。

+0

你試圖實現一種叫做「無限滾動」的東西。這裏有一個插件,你可能會發現有用http://www.infinite-scroll.com/ – ggreiner 2012-02-08 00:12:18

回答

0

那麼,在這種情況下,你將需要設計與大量的JavaScript頁面。我從問題中得到的是有一些表有6000個記錄。現在你想在頁面上顯示這些數據。您還希望每當發生某些變化時,您還希望將更改映射到屏幕上。

爲此,您需要做的第一件事就是將每一行與其正面的鑰匙進行映射。 您需要閱讀一些AJAX,其餘部分非常簡單。

你可以在固定間隔5秒後命中服務器。所以這次命中將返回你更改的項目。現在,您在頁面上的最大ID將與服務器返回的記錄進行比較。

響應可以是三個部分: 一)刪除 二)編輯 C)插入

,你可以在給定的點結合的編輯和插入的去,你無法跟蹤你是否會不希望有跟蹤相同的開銷。

因此,只有兩個塊一個)刪除和b)插入/改性

而創建視圖,每一行將與包含主鍵ID的DIV。所以div的id將被稱爲「div23」,其中23是主鍵。

現在您需要迭代響應。您可以使用XML或JSON輕鬆地使用該解決方案。

讓我們來回答一個樣本。

在插入/編輯時,刪除和46,1000,6001等具有帶有ID 23,45,97等的json框架的響應。現在要刪除,你只需要寫:document.getElementById(「div」+ id).innerHTML =「」;或者你可以從dom模型中刪除它。

同樣,你可以得到的div和編輯相同。如果你沒有得到任何股利將意味着你需要插入你可以做到底。

對於ajax,您可以獲得許多框架,如原型,dojo等。您可以在w3schools網站上找到AJAX的基本示例。

我希望它有幫助。

+0

我有點困惑,說實話。我很欣賞所有真實的幫助。 但現在我不感興趣新的,刪除,編輯功能。 我唯一的爭議和疑問是,如何顯示...讓我們說... 20個記錄何時加載頁面,然後每當用戶向下滾動時,再加載20個記錄。即時通訊工作與一個表格內的一個div。 我的目標是,如何在每次有人向下滾動時加載這20條記錄,而無需刷新頁面。或者任何其他簡單的選擇。 但我已經搜索了很多像這樣的例子與jQuery + servler + jsp和迄今沒有... 最好的問候, 和thhks – user1195961 2012-02-08 08:40:38

+0

看到,你包含數據在一個div(這將是一個父div )。現在在div中,你需要不斷添加新的元素。你有兩個選擇。 a)你可以編輯它的innerHTML,或者你可以通過javascript添加元素。你可以看到使用javascript創建dom對象。只是創建div的示例:http://it.toolbox.com/wiki/index.php/Dynamically_Creating_a_Div_in_Javascript。你可以將這個div添加到父div。有一件事需要注意的是,您還必須刪除一堆未使用的div並將其替換爲一個應該減少瀏覽器負載的字符串(我相信)。 – Amit 2012-02-08 09:56:44

+0

因此,當用戶向下滾動獲取下20條記錄時。加載下一個40條記錄會更好,這樣用戶不會感覺到任何延遲。 – Amit 2012-02-08 09:57:08