在 Servlet-JSP 中向下滚动加载数据答案

【问题标题】：Load data with scroll down in Servlet-JSP在 Servlet-JSP 中向下滚动加载数据
【发布时间】：2012-02-07 23:49:55
【问题描述】：

我正在开发一个网站，它有大约 6000 条记录，我的公司使用 Internet Explorer 8 作为其默认浏览器（我知道...），加载整个数据大约需要 50 秒。所以我试图在每次用户到达 div 末尾时实现加载数据功能。

网站的结构基本上是这样的。 Servlet - Jsp. 基本上，当请求某个 jsp 时，分配的 servlet 会执行 doGet，并且每次用户插入/编辑/删除记录时，它都会执行 doPost，但每次操作始终由 JSP 处理。

那么在这种情况下向下滚动时有什么方法可以实现加载数据？（如果可能，我希望不要在页面中使用刷新）。

ps：我现在必须为此使用 JQuery，但不知道如何实现它。 =)。

【问题讨论】：

您正在尝试实现一种称为“无限滚动”的东西。这是一个您可能会发现有用的插件infinite-scroll.com

标签： jquery jsp servlets load scroll

【解决方案1】：

好吧，在这种情况下，您将需要使用大量 javascript 来设计页面。我从这个问题中得到的是有一些表有 6000 条记录。现在您想在页面上显示这些数据。您还希望每当发生更改时，您也希望在屏幕上映射更改。

为此，您需要做的第一件事是将每一行与其前面的键对应起来。你需要读一点AJAX，剩下的就很简单了。

您可以在固定时间间隔（例如 5 秒）后访问服务器。因此，此命中将返回您更改的项目。现在您在页面上的最大 id 将与服务器返回的记录进行比较。

响应可以分为三部分： a) 删除 b) 编辑 c) 插入

您可以结合编辑和插入，因为在给定点您无法跟踪您是否可能不希望有跟踪相同的开销。

所以只有两个块 a) 删除和 b) 插入/修改

在创建视图时，每一行都是一个 id 包含主键的 div。所以 div 的 id 会说“div23”，其中 23 是主键。

现在您需要迭代响应。您可以使用 XML 或 JSON 轻松地使用此解决方案。

让我们做一个响应示例。

在删除时响应 json 对象的 id 为 23、45、97 等，在插入/编辑中响应为 46、1000、6001 等。

现在要删除，你只需要写： document.getElementById("div" + id).innerHTML = "";或者您可以从 dom 模型中删除相同的内容。

同样，您可以获取 div 并对其进行编辑。如果你没有得到任何 div 将意味着你需要插入你可以在最后做的事情。

对于 ajax，您可以获得许多框架，如原型、dojo 等。您可以在 w3schools 网站上找到 AJAX 的基本示例。

希望对你有帮助。

【讨论】：

老实说，我有点困惑。我感谢所有真正的帮助。但现在我对新增、删除、编辑功能不感兴趣。我唯一的疑虑和疑问是，如何显示……让我们说……页面加载时有 20 条记录，然后每次用户向下滚动时，再加载 20 条。我正在使用 div 内的表格。我的目标是，每次有人向下滚动时如何加载这 20 条记录，而不刷新页面。或任何其他简单的替代方案。但是我已经用 jquery+servler+jsp 搜索了很多这样的例子，但到目前为止什么都没有……最好的问候，谢谢
看，你在一个 div 中包含数据（这将是一个父 div）。现在在 div 中，您需要不断添加新元素。你有两个选择。 a) 你可以编辑它的 innerHTML 或者你可以通过 javascript 添加元素。您可以看到使用 javascript 创建 dom 对象。只是一个创建 div 的例子：it.toolbox.com/wiki/index.php/…。您可以将此 div 添加到父 div。需要注意的一件事是您还必须删除一堆未使用的 div 并将它们替换为应该减少浏览器负载的字符串（我相信）。
所以当用户向下滚动时，获取接下来的 20 条记录。加载接下来的 40 条记录会更好，这样用户就不会感到任何延迟。
我将如何进行 JSP-SERVLET-JSP 操作：S？那是我的问题，我不知道如何实现它。如何请求它们并在该过程中尽量不刷新
看，您将调用的 servlet/jsp 需要有一个代码，以便您在请求中发送一个参数，说明当前记录号。现在 jsp/servlet 将在此之后返回 40 条记录。您可以将每条记录作为一个 div，其中的每个项目作为一个 div，或者您可以在那里有一个表格。要从那里调用和获取记录，请从 w3schools 阅读一些关于 ajax 的信息。这很容易实现。您可以使用任何可用的框架以及原型 jquery 等，只要您觉得自己适合工作。