如何使用 servlet 和 jsp 做 SPA？

Posted 2023-03-05

【中文标题】如何使用 servlet 和 jsp 做 SPA？

【英文标题】：How to do a SPA using servlets and jsp?

【发布时间】：2016-04-13 07:35:08

【问题描述】：

我正在尝试使用 servlet 和 jsp 页面做一个单页面应用程序。 目前我有第一页，这很简单：一个转发到相应 jsp 的 servlet。

导航到第二页时，实现应该如何？ 我猜应该是ajax调用，servlet会填充必要的数据，但是jsp如何显示第二页呢？

【参考方案1】：

如果您使用的是 Ajax 请求，那么您需要告诉浏览器重定向到第二个页面。示例：

response.sendRedirect("second_page.jsp");

在您的 servlet 中，您需要区分对第一页的请求和需要重定向到第二页的请求。例如，您可以使用参数或会话值。

if (request.getParameter("page2") != null) 
    response.sendRedirect("second_page.jsp");
 else 
    .... // include here the normal logic of your Servlet for page 1

然后，您可以使用或不使用参数 page2 调用您的 servlet，以转到第 1 页（不带参数）或第 2 页（带参数）。

【参考方案2】：

JSP 是一种服务器端 ui 技术。 Servlet 侦听特定的 url 并重定向到 JSP 页面。 JSP 被编译为一个类（实际上是另一个 servlet），被调用（将添加数据并运行内联脚本）并将输出（即 html）发送到客户端（浏览器）。要访问不同的页面，需要向服务器（servlet）查询另一个 url，从而得到 另一个 html 页面。

要创建 SPA，您需要 客户端 技术，例如 javascript。您向服务器查询单个 html 页面。例如，由 HTML 和 JavaScript 组成的页面（甚至可以是单个 JSP 的输出，不要混淆）被发送到客户端（浏览器）并运行 JS。这通常由 AngularJS、EmberJS 或 Backbone 等框架支持。页面设置好后，页面内的链接是anchors (http://example.com/#/mySecondPage)，因此单击它们将再次调用框架（Ajax，查询新数据的服务器），但将停留在同一页面上。然后页面的某些内容可能会被新内容替换。

【讨论】：

因为这是一个最近的答案，使用 hashbangs 可能会导致问题。由于任何可能使用的浏览器都支持 history.pushState，因此使用此 HTML5 功能更有意义。但是，它要求后端服务器始终返回相同的呈现页面，而不管它是从哪个 URL 请求的。这可能很棘手。这样做的原因是书签。如果使用书签 /myapp/item/123 浏览器将要求该 URL，从而破坏应用程序。 servlet 引擎需要知道任何带有 /myapp/* 的 url 都应该返回 index.jsp。

【参考方案3】：

如果它是真正的 SPA，那么您只需一个 JSP 并使用 Ajax 处理所有功能（在初始页面加载之后）。

您是否考虑过使用诸如 Angular 之类的客户端框架来帮助您解决此问题？

根据您的 SPA 的丰富程度，您可以使用相同的 servlet 或多个 servlet 来服务每个页面。

除非您是为课程或教程这样做并且对如何实现它有一些限制，否则如果您将 Angular 之类的东西与 Spring 之类的服务器端框架结合起来而不是编码，您很可能会为自己节省很多时间小服务程序。作为建议，请查看Spring with Angular。

【参考方案4】：

在 SPA 中，浏览器只加载文档一次（或几次，每个子应用程序一次），与服务器的进一步通信通常通过 AJAX 或 Websockets 完成。

我建议您将应用程序建模为thin server architecture，即在浏览器中运行的客户端应用程序（HTML、CSS、Javascript）使用服务器提供的 Web 服务 API。

以下几点值得了解；

客户端：

仅表示逻辑 通过 URL 哈希表示状态。这将启用书签、超链接和浏览历史记录。您的客户端应用程序应该监听 URL 哈希的变化并采取相应的行动。这种技术称为“路由”，它被所有 Javascript 框架实现。 客户端应用程序在服务器端打包，因此可以在单个请求中下载（在 .html、.jsp、servlet、.jsp + 多个 .jspf 中，...） 使用服务器通过 AJAX 或 Websockets 提供的服务

服务器：

提供客户端应用程序下载 提供干净、无状态的 API 供客户端应用程序使用，返回 JSON（数据）比返回 HTML（表示逻辑）更好 (Why is it a bad practice to return generated HTML instead of JSON? Or is it?) 使用 REST 或 JSON-RPC 框架来创建 API。关于选择什么有很多争论（see here 或here）。在我看来，REST 优于 RPC 的唯一优势在于，由于 REST 已成为“事实上的”标准，它的互操作性更高，因此我对 SPA 应用程序的建议是使用 JSON-RPC，因为您的代码是 API 的唯一客户端。

客户端和服务器框架都有很多替代方案。

Javascript：AngularJS、EmberJS 或 Backbone，...

休息：Spring，Jersey，Restlet，..

JSON-RPC：https://en.wikipedia.org/wiki/JSON-RPC#Implementations

关于 JSON-RPC，您可能想看看 Brutusin-RPC，这是我创建的一个 JEE 微框架 :)