获取和显示页面中项目列表的更好方法（JSON vs HTML）答案

【问题标题】：Better way to get and show list of items in a page(JSON vs HTML)获取和显示页面中项目列表的更好方法（JSON vs HTML）
【发布时间】：2016-04-06 07:59:02
【问题描述】：

我正在获取 JSON（通过 AJAX）中的项目列表，并通过 JS 创建所需的标记并附加到视图中。另一方面，我见过几个不使用这种做法的示例，它们通过 AJAX 发送完整或部分完整的标记，然后简单地将它们附加到文档中。所以肯定是在服务器上生成标记。

所以我很好奇哪种方法更好，为什么。我可以清楚地看到的一件事是，后一种方法不会将 JSON 结构暴露给 UI。

【问题讨论】：

“后一种方法不会将 JSON 结构暴露给 UI” - 但这不是特别重要吗？ JSON 只需要包含用户最终会看到的相同数据，因此它并不完全是一个秘密。

标签： javascript html json ajax

【解决方案1】：

您对公开 json 结构是正确的，但也许要考虑的主要事情是加载时间，包括客户端和服务器端。如果服务器是专用且足够强大的，那么在服务器中生成标记将很快，并且会在客户端保持站点快速。如果没有，您将希望客户端尽可能多地进行处理。在客户端生成标记并不是一件坏事。 popukar angularjs 框架在客户端构建标记，非常有效。

【讨论】：

相反，JSON 可能（可能会）比相应的 HTML 占用更少的带宽。
是的。这一切都取决于客户端和服务器拥有多少带宽和处理能力。

【解决方案2】：

选择取决于几个因素，例如

what we are trying to achieve - 要求必须图片清晰。
what is the amount of work involved with these choices alone
which choice will have better performance
在少数情况下which choice will get the job done quick。 - 在交付过程中性能受到影响

让我们举个例子更好地解释。

1) 创建一个表格来显示员工的所有详细信息。

由于这是一个独立的表，我们不必担心传递 JSON，然后在 JS 中编写逻辑来构建表。这可以在不需要 JS 的情况下快速完成。 -- HTML 获胜

2) 创建一个表格来显示员工的所有详细信息。还可以构建一个动态条形图，通过单击表格中的任何行来显示员工组的详细信息。

这里的场景是建立一个表格，同时点击任何表格行获取员工组并生成条形图以显示该组中的员工总数，或者可能是任何其他内容。

在这里，如果我们只用 HTML 构建了表格，那么要获取条形图的数据，要么我们需要进行另一个服务器调用，要么对所有 tr 进行 for 循环，然后从每个单元格中提取数据，这是一个痛。

如果您使用 JSON 来动态构建表结构，我们可以使用相同的 JSON 数据然后构建图形并且快速而无需其他开销，因为我们已经准备好操作数据。 -- JSON 获胜

这只是一个小例子。此外，这个概念完全值得商榷，它是开发人员的选择和他所接受的，以及上面提到的其他一些因素。我想你明白了。希望这会有所帮助。

【讨论】：