为什么返回生成的 HTML 而不是 JSON 是一种不好的做法?或者是吗?

IT技术 javascript jquery html ajax json
2021-02-09 00:29:24

使用 JQuery 或任何其他类似框架从您的自定义 URL/Web 服务加载 HTML 内容非常容易。我已经多次使用这种方法,直到现在,发现性能令人满意。

但是所有的书,所有的专家都试图让我使用 JSON 而不是生成的 HTML。它如何比 HTML 优越得多?

它会快很多吗?
它在服务器上的负载是否要小得多?

另一方面,我有一些使用生成的 HTML 的原因。

  1. 它是简单的标记,通常与 JSON 一样紧凑或更紧凑。
  2. 它不太容易出错,因为你得到的只是标记,没有代码。
  3. 在大多数情况下编程会更快,因为您不必为客户端单独编写代码。

你站在哪一边,为什么?

6个回答

我有点两边,实际上:

  • 当我在 javascript 方面需要的是数据时,我使用 JSON
  • 当我在 javascript 方面需要的是我不会做任何计算的演示时,我通常使用 HTML

使用 HTML 的主要优点是当您想用 Ajax 请求返回的内容替换页面的整个部分时:

  • 在 JS 中重建页面的一部分是(相当)困难的
  • 您可能已经在服务器端有一些模板引擎,它首先用于生成页面......为什么不重用它?

我通常不会真正考虑事物的“性能”方面,至少在服务器上:

  • 在服务器上,生成一部分 HTML 或一些 JSON 可能不会有太大的不同
  • 关于通过网络传输的内容的大小:嗯,您可能不会使用数百 KB 的数据/html...在传输的任何内容上使用 gzip 将产生最大的不同(而不是在 HTML 之间进行选择)和 JSON)
  • 但是,可以考虑的一件事是客户端需要哪些资源才能从 JSON 数据重新创建 HTML (或 DOM 结构) ... -)

最后,一件绝对重要的事情:

  • 您需要多长时间开发一个新系统,该系统将数据作为 JSON + 代码将其作为 HTML 注入页面所需的 JS 代码发送?
  • 返回 HTML 需要多长时间?如果您可以重用一些现有的服务器端代码,需要多长时间?


并回答另一个答案:如果您需要更新页面的多个部分,仍然存在将所有这些部分发送到一个包含多个 HTML 部分的大字符串中的解决方案/技巧,并在 JS 中提取相关部分。

例如,您可以返回一些如下所示的字符串:

<!-- MARKER_BEGIN_PART1 -->
here goes the html
code for part 1
<!-- MARKER_END_PART1 -->
<!-- MARKER_BEGIN_PART2 -->
here goes the html
code for part 2
<!-- MARKER_END_PART2 -->
<!-- MARKER_BEGIN_PART3 -->
here goes the json data
that will be used to build part 3
from the JS code
<!-- MARKER_END_PART3 -->

这看起来不太好,但它绝对有用(我已经使用它很多次了,主要是当 HTML 数据太大而无法封装到 JSON 中时):您正在为页面的部分发送 HTML需要演示,并且您正在为需要数据的情况发送 JSON...

...为了提取这些,我想 JS 子字符串方法可以解决问题;-)

@Cyril:嗯?我认为您是想说数据要有用,就必须使用并以某种形式呈现在某处,我同意。至少说数据就是展示似乎是错误的。
2021-03-19 00:29:24
基本问题是您是否绝对、肯定、最终确定您不会将这些数据用于除 HTML 之外的任何内容。因为一旦打包成 HTML,数据将几乎无法恢复。使用 JSON,您的后端可以与 XML、SVG、数据库引擎、跨站点 API 以及一千种其他可以接受 JSON 的前端和系统一起使用。使用 HTML,您将只能在 HTML 中使用它。
2021-03-19 00:29:24
嗨 Vinko,注意到“最终”了吗?我的意思就是你的意思。只是想在这里进入引用引文的书。哈哈!
2021-03-31 00:29:24
@SF:当从服务器返回 HTML 时,我确保将 HTML 生成代码与访问数据库的代码分开。这样我也可以轻松添加 JSON 表单。
2021-04-04 00:29:24
所有数据最终都是展示。
2021-04-11 00:29:24

我主要同意这里的观点。我只是想将它们总结为:

  • 如果您最终在客户端解析 HTML 以对其进行一些计算,则发送 HTML 是不好的做法。

  • 如果您最终要做的只是将 JSON 合并到页面的 DOM 树中,那么发送 JSON 是不好的做法。

是否可以返回具有 <script> 标记的 HTML,然后在加载页面时在客户端执行它们?
2021-03-31 00:29:24
我想知道如果将“知识的半条命”添加到等式中,上述陈述的真实性会持续多久
2021-04-04 00:29:24
这。此外,如果您返回的数据需要以某种方式在其呈现中保持流畅,例如,如果您有一个 HTML 表格,其中包含您希望能够排序的列。无论您现在是否已经使它们可排序,您可能想稍后再排序,因此在这种情况下,为了面向未来而采取 JSON 路线的额外努力是值得的。
2021-04-05 00:29:24
如果您需要进行一些计算并将其合并到页面的 DOM 中怎么办?
2021-04-10 00:29:24
我还要补充一点,如果您通过 JSON 请求图像 url 只是为了尝试在页面上呈现它们,那么从一开始就将它们包含在 HTML 中的性能要高得多,这样图像就可以更早地开始加载(在您的 ajax 回来之前) .
2021-04-10 00:29:24

好,

我是少数喜欢以这种方式分离事物的人之一: - 服务器负责提供数据(模型);- 客户端负责展示(查看)和操作数据(模型);

因此,服务器应该专注于交付模型(在这种情况下,JSON 更好)。这样,您就可以获得灵活的方法。如果您想更改模型的视图,您可以让服务器发送相同的数据,只需更改客户端、javascript 组件,将数据更改为视图。想象一下,您有一台服务器向移动设备和桌面应用程序提供数据。

此外,这种方法提高了生产力,因为服务器和客户端代码可以同时构建,永远不会失去焦点,这就是当您不断从 js 切换到 PHP / JAVA / 等时发生的情况。

一般来说,我认为大多数人更喜欢在服务器端做尽可能多的事情,因为他们不掌握js,所以他们尽可能地避免它。

基本上,我和那些在 Angular 上工作的人有相同的看法。在我看来,这是网络应用程序的未来。

是的,我完全同意你的看法。但是,在涉及敏感信息时尽可能多地做服务器端,我认为最好。如果您需要客户端根据结果做出不同的反应,我将使用 json 否则我将使用 html。
2021-03-27 00:29:24
现在是 2021 年,是的,每个人都在转向或至少关注有关这些新 JS 框架(Svelte/Vue/React/等)的新闻。不错的预测;)
2021-04-02 00:29:24

我有一些有趣的东西,我想我可以添加。我开发了一个只加载一次完整视图的应用程序。从那时起,它仅使用 ajax 与服务器通信。它只需要加载一页(我的原因在这里并不重要)。有趣的部分是,我有一个特殊的需求,即返回一些要在 javascript 中操作的数据和要显示的部分视图。我可以把它分成两个对两个单独的动作方法的调用,但我决定做一些更有趣的事情。

看看这个:

public JsonResult MyJsonObject(string someData)
{
     return Json(new { SomeData = someData, PartialView = RenderPartialViewToString("JsonPartialView", null) }, JsonRequestBehavior.AllowGet);
}

你可能会问什么是 RenderPartialViewToString()?这是这里的小块酷:

protected string RenderPartialViewToString(string viewName, object model)
{
     ViewData.Model = model;

     using (StringWriter sw = new StringWriter())
     {
          ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
          ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
          viewResult.View.Render(viewContext, sw);

          return sw.GetStringBuilder().ToString();
     }
}

我没有对此进行任何性能测试,所以我不确定它是否会比为 JsonResult 调用一个操作方法和为 ParticalViewResult 调用一个操作方法产生更多或更少的开销,但我仍然认为它很酷。它只是将部分视图序列化为一个字符串,并将其与 Json 作为参数之一一起发送。然后我使用 JQuery 来获取该参数并将其放入适当的 DOM 节点中 :)

让我知道您对我的混合动力车的看法!

在一个请求中发送渲染视图和数据似乎有点多余。开个玩笑,如果您有能力进行客户端视图渲染,那么将视图模板和数据作为单独的请求发送会更好。它需要一个额外的请求,但只需要一次,因为模板请求将被缓存以供后续请求使用。理想情况下,最好结合使用客户端和服务器端视图渲染,以便您可以在服务器上构建页面并在浏览器中构建部分,但如果您只实现服务器端视图渲染,这不是一个坏方法。
2021-04-01 00:29:24

如果响应不需要进一步的客户端处理,我认为 HTML 是可以的。发送 JSON 只会迫使您进行客户端处理。

另一方面,当我不想一次使用所有响应数据时,我会使用 JSON。例如,我有一系列三个链式选择,其中一个的选定值决定了哪些值将用于填充第二个,依此类推。