通过服务器或通过 JavaScript 注入 HTML 是更好的做法吗？答案

【问题标题】：Is it Better Practice to Inject HTML Through a Server or Through JavaScript?通过服务器或通过 JavaScript 注入 HTML 是更好的做法吗？
【发布时间】：2011-12-30 01:16:54
【问题描述】：

我当前的项目让我经常访问数据库。为此，我通过 jQuery Get 和 Post 调用来调用我的 Java Servlet。我想知道在将其发送回 jQuery 之前，使用从 servlet 中的数据库收集的数据构建任何 HTML 是否更好，或者我是否应该单独使用 JavaScript 进行 HTML 注入？例如，假设我有一个包含用户 ID 和用户名的数据库表。如果我想在此表之外创建一个选择框，哪种方法更好？还是有更好的方法？尝试将从数据库中检索到的数据的最原始形式从 servlet 发送到 JavaScript，让它处理所有 HTML 格式会更好吗？

方法 1 (Java)

鉴于以下 HTML/JavaScript

<html>
    <head>
        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.get("servlet?cmd=getUsers", function(data) {
                    $("#select").html(data);
                }, "html");
            });
        </script>
    </head>
    <body>
        <div id="select"></div>
    </body>
</html>

使用以下 Servlet

PrintWriter writer = response.getWriter();
response.setContentType("text/html");

writer.println("<select id='userSelect' name='user'>");
while(resultSet.next()) {
    String userId = resultSet.getString("ixUser");
    String userName = resultSet.getString("sName");

    writer.println("<option value='" + userId + "'>" + userName + "</option>");
}
writer.println("</select>");

方法 2 (JavaScript)

鉴于以下 HTML/JavaScript

<html>
    <head>
        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.get("servlet?cmd=getUsers", function(data) {
                    $("#select").html("<select id='userSelect' name='user'>");
                    $(data).find("user").each(function() {
                        var id = $(this).find("id").text();
                        var name = $(this).find("name").text();

                        $("#userSelect").append("<option value='" + id + "'>" + name + "</option>");
                    });
                    $("#select").append("</select>");
                }, "xml");
            });
        </script>
    </head>
    <body>
        <div id="select"></div>
    </body>
</html>

使用以下 Servlet

PrintWriter writer = response.getWriter();
response.setContentType("text/xml");

writer.println("<xml>");
while(resultSet.next()) {
    String userId = resultSet.getString("ixUser");
    String userName = resultSet.getString("sName");

    writer.println("<user>");
    writer.println("<id>" + userid + "</id>");
    writer.println("<name>" + userName + "</name>");
    writer.println("</user>");
}
writer.println("</xml>");

【问题讨论】：

不要通过 ajax 返回 HTML。返回 JSON 数据。然后从 JSON 构建文档片段并将它们注入 DOM
好吧，听起来好像 JSON 是要走的路。尽管给出的所有答案都非常有帮助，但我只需要接受我找到的第一个回答了我的问题的答案。

标签： java javascript jquery html coding-style

【解决方案1】：

我会选择向客户端发送原始（嗯，JSON）数据并让 Javascript 负责模板。为什么？

关注点分离：您的服务器代码不应该知道表示逻辑。

更少的带宽：如果您可以（至少）节省几 k/request，为什么不呢？

【讨论】：

separation of concerns 是我主要考虑的问题。由于我是 Web 开发的新手，所以我的老板是推荐第一种方法的人。由于我在 C++ 中做了很多 OOP，因此我觉得方法 2（甚至 JSON 版本）要好得多。
我同意，如果您正在进行客户端页面更新，您应该只发送数据（最好是 JSON）。这种方法还可以让您充分利用所有浪费的客户端 CPU，而不是强迫您的服务器完成所有工作。

【解决方案2】：

似乎世界正在朝着您的第二种方法发展。这有几个原因：

您的用户会感觉到您的应用程序比实际响应速度更快，因为页面将分部分加载，所以总是有进展（或者至少是一个进度指示器，如果有一些事情需要很长时间才能完成加载）。
您可以将数据服务重新用于您的网站以外的其他客户端（想想本地移动应用程序）。
数据格式几乎总是比生成的 html 更压缩，因此您通过网络发送的数据更少。出于这个原因，我实际上会推荐 json 而不是 xml。
大多数浏览器中的 javascript 引擎比几年前要高效得多。这使您可以从服务器中卸载一些更复杂的页面布局逻辑，从而使您的应用程序更具可扩展性。
将更容易测试返回的数据是否正确，而无需通过格式化 html 来访问它。

【讨论】：

1.和 2. 似乎并不适用。 2.是有效的，但（想想移动）不是。 2. 如果你想让 Java 应用程序与 servlet 对话并解析 JSON，则可能是有效的
我不知道你为什么这么认为。这些都不是很有争议的点。对于第一点，页面布局将在加载内容数据时立即呈现。其次，用我能想到的任何编程语言编写的任何客户端应用程序都可以解析 JSON。
我将“think mobile”解释为“think mobile website”>_
好吧，所有这些观点似乎都有效，尤其是最后一点。我正在检查成功函数中使用愚蠢的alert(data); 语句返回的数据的有效性......它并不漂亮......因此，从 servlet 构建 JSON 并将其发送回 JavaScript 是最好的方法，那么？

【解决方案3】：

我建议仅以 JSON 等轻量级方式返回数据。

我的理由：

带宽
出现性能问题时要缓存的较小数据
灵活性。如果您想将此数据公开给应用程序的另一部分或移动设备？

还有其他几种方法，但在我看来，这是一种更有条理的方法。让客户处理标记处理。

我建议 jQote2 作为一个很棒的客户端模板工具。（简直太棒了！）

【讨论】：

【解决方案4】：

现在很酷的孩子们在浏览器上做 MVC。 -- 您的方法 2，但更复杂的客户端堆栈。

换句话说，您的服务器导出一个提供数据的 api，而不是 html。

然后，在浏览器上，您的 JS 应用程序具有单独的模型、视图和控制器代码。模型和控制器层参见Backbone 项目，视图/模板层参见Mustache。一个article.另一个post.

【讨论】：

好的，谢谢。我会研究这些，尽管我可能在这个项目中太过分了，无法回去进行如此剧烈的修改。

【解决方案5】：

方法 1，因为您对方法 2 不够满意。

关于方法 2 的几句话。在字符串连接或对象构建之间进行选择。

var html = '<select...
...
html .= '</select>';
$("#select").append(html);

或

var $sel = $('<select>').attr('id', 'userSelect').attr('name', 'user').

如您所见，$('<tag>') 语法创建了一个新的 dom 元素。

此外，如果可以，请返回一个 json 对象而不是 xml。它们更容易在 javascript 中使用。所以你可以做

for (i in data) {
   $('<option>').text(data[i].name).val(data[i].id).appendTo($sel);
}
$("#select").append($sel);

然后，还有method3：模板化...

【讨论】：

模板（方法3）还在客户端完成吗？所以 servlet 仍然可以将 JSON 发送回 JavaScript，然后我使用某种形式的模板？还是我缺少此方法的另一个步骤？
正如这里所说，模板插件（纯，胡须，不推荐使用之前出生的 $.tmpl()）是时代的味道。您仍然可以输出隐藏显示的“空”html 结构，并将其用作带有 $.clone() 的模板（甚至 ajax 加载模板），但通常需要更多“工作”。无论如何，没有 js 模板插件在“库”中或多或少地像 jquery 那样“获胜”。检查 Pure 和 mustache，因为它们有点在相反的边缘，实施明智。 renderjs 看起来很有希望，但还不是 beta 版。我使用自己的系统，它既有趣又灵活，但这意味着我几乎没有带有模板插件的 xp。
最后，所有模板插件都在快速发展。这很好，但这也意味着一些维护。然而，一旦你掌握了这个概念，通常就会非常接近：$('#destination').templatePlugin(template, jsonData);。模板“功能”（placeHolders、逻辑（if、循环））的差异上升。