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

Question

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

我的工作方式是创建一个完整的网页(带有"html"，"head“等)标签。这将适用于所有浏览器。我的整个应用程序都是在禁用JS的情况下运行的(不管多么丑陋)。

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

这一切都运行得很好，我喜欢它的架构，但我添加了一个优化，让AJAX请求附加一个"contentOnly“参数；这是由Spring MVC视图选择的，它有条件地忽略了"head”等--也就是说，它只呈现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>

Answer 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来获得唯一的模板内容。

Answer 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>