Question

我目前的项目让我经常访问数据库。为此，我通过jQuery Get和Post调用来调用Java Servlet。我想知道使用我从servlet中的数据库收集的数据构建任何HTML是否更好的做法，然后再将其发送回jQuery，或者我是否应该单独使用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>");

Answer 1

我选择将原始（好的，JSON）数据发送到客户端并让Javascript处理模板。为什么呢？

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

带宽更少：如果你可以节省几个k /请求（至少），为什么不呢？

Answer 2

世界似乎正朝着你的第二种方式迈进。这有几个原因：

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

Answer 3

我建议只以轻量级方式返回数据，例如JSON。

我的理由：

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

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

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

Answer 4

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

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

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

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

然后，有方法3：模板化......

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

方法1（Java）

方法2（JavaScript）

5 个答案: