提供静态和 AJAX 页面内容的最佳方式是什么？答案

【问题标题】：What's the best way to deliver both static and AJAX page content?提供静态和 AJAX 页面内容的最佳方式是什么？
【发布时间】：2011-07-18 16:01:56
【问题描述】：

为非 JS 启用和 JS 启用的页面开发网页的最佳实践是什么？我正在开发一个使用 JSP/JSTL 作为视图技术的 Spring MVC Web 应用程序。

我的工作方式是在其中创建一个完整的网页（带有“html”、“head”等）标签。这适用于所有浏览器。在禁用 JS 的情况下，我的整个应用程序都可以正常工作（但是丑陋的错误）。

每个页面中还包含一些 jQuery 脚本，用于美化页面，通常将顶级“div”转换为选项卡，将其他 div 转换为对话框等。JS“劫持”底层 HTML。我的 JS 劫持链接和按钮，使用 AJAX 调用将内容加载到正确的对话框或选项卡 div 中。

这一切都很好，我喜欢这个架构，但我添加了一个优化，以便 AJAX 请求附加一个“contentOnly”参数；这是由 Spring MVC 视图接收的，该视图有条件地忽略“头部”等 - 即它只呈现 AJAX 版本想要的真实内容。只是感觉很笨拙。

我知道我可以加载整个页面并丢弃外部位，但这似乎无法加载所有并非绝对必要的关联 CSS 和 JS 文件。

我的问题是：有没有更好的方法来编写这种条件格式，我应该使用不同的视图技术还是其他东西，比如 Velocity 或 FreeMarker 或 Grails 使用的任何东西？

我的条件示例：-

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<c:if test="${param.contentOnly == null}">
<!DOCTYPE html>
<html>
<head>
    <%@ include file="_stylesAndScripts.jsp"%>
    <title>My App Title</title>
</head>

<body>
    <%@ include file="_header.jsp"%>
    <%@ include file="_menu.jsp"%>
</c:if>
    <div id="leadListPanel" class="contentPanel">
        <h1>My App Title</h1>
        <p>The time on the server is ${serverTime}.</p>

        <table id="leadTable" class="list">
                    ... rest of content...

<c:if test="${param.contentOnly == null}">

    <%@ include file="_footer.jsp"%>
</body>
</html>
</c:if>

【问题讨论】：

标签： ajax spring jsp

【解决方案1】：

您需要反过来包含文件。

/WEB-INF/template.jsp

<!DOCTYPE html>
<html>
    <head>
        <%@ include file="_stylesAndScripts.jsp"%>
        <title>My App Title</title>
    </head>
    <body>
        <%@ include file="_header.jsp"%>
        <%@ include file="_menu.jsp"%>
        <jsp:include page="${page}.jsp" />
        <%@ include file="_footer.jsp"%>
    </body>
</html>

leads.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div id="leadListPanel" class="contentPanel">
    <h1>My App Title</h1>
    <p>The time on the server is ${serverTime}.</p>

    <table id="leadTable" class="list">
                ... rest of content...

并创建一个控制器，根据特定的请求 URL 将 leads 设置为 ${page} 变量并转发到 template.jsp。由于我不做Spring，所以无法详细回答如何用Spring来实现。但是下面的基本 JSP/Servlet 启动示例应该给出一般的想法：

@WebServlet(urlPatterns={"/pages/*"})
public class TemplateServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String page = request.getPathInfo();
        // .. Do some other preprocessing if necessary .. and then:
        request.setAttribute("page", page);
        request.getRequestDispatcher("/WEB-INF/template.jsp").forward(request, response);
    }

}

以http://example.com/contextname/pages/leads 调用它以获取包含leads.jsp 的模板。最后，您应该能够独立调用http://example.com/contextname/leads.jsp 来获取唯一的模板内容。

【讨论】：

感谢 BalusC，这似乎是一个不错的解决方案。我也想知道像 SiteMesh 这样的东西是否可以帮助解决这个问题。

【解决方案2】：

几年前我在 Freemarker 中使用过这种方法，但我不知道更好的方法。

您可以做的是为这些条件创建 JSP 标记，以便它们看起来更好并隐藏实际实现。像这样的：

<t:NonAjax>
  <!DOCTYPE html>
  <html>
  <head>
    <%@ include file="_stylesAndScripts.jsp"%>
    <title>My App Title</title>
  </head>
  <body>
    <%@ include file="_header.jsp"%>
    <%@ include file="_menu.jsp"%>
</t:NonAjax>
<div id="leadListPanel" class="contentPanel">
    <h1>My App Title</h1>
    <p>The time on the server is ${serverTime}.</p>

    <table id="leadTable" class="list">
                ... rest of content...

<t:NonAjax>
  <%@ include file="_footer.jsp"%>
  </body>
  </html>
</t:NonAjax>

【讨论】：