为什么返回生成的HTML而不是JSON是一种不好的做法？ 还是？

本文翻译自：Why is it a bad practice to return generated HTML instead of JSON? Or is it?

It is quite easy to load HTML content from your custom URLs/Web services using JQuery or any other similar framework. 使用JQuery或任何其他类似框架从自定义URL / Web服务中加载HTML内容非常容易。 I've used this approach many times and till now and found the performance satisfactory. 到目前为止，我已经使用了很多次这种方法，并且发现性能令人满意。

But all the books, all the experts are trying to get me to use JSON instead of generated HTML. 但是所有书籍，所有专家都试图让我使用JSON而不是生成的HTML。 How's it much more superior than HTML? 它比HTML优越得多吗？

Is it very much faster? 它快很多吗？
Does it have a very much lesser load on the server? 它在服务器上的负载是否要小得多？

On the other side I have some reasons for using generated HTML. 另一方面，我有一些使用生成的HTML的原因。

1. It's simple markup, and often just as compact or actually more compact than JSON. 它是简单的标记，通常与JSON一样紧凑或实际上更紧凑。
2. It's less error prone cause all you're getting is markup, and no code. 错误少了，因为您得到的只是标记，而且没有代码。
3. It will be faster to program in most cases cause you won't have to write code separately for the client end. 在大多数情况下，这将使编程速度更快，因为您不必为客户端单独编写代码。

Which side are you on and why? 您站在哪一边？为什么？

---

#1楼

参考：https://stackoom.com/question/5O7p/为什么返回生成的HTML而不是JSON是一种不好的做法-还是

---

#2楼

I'm a bit on both sides, actually : 实际上，我两面都是：

• When what I need on the javascript side is data , I use JSON 当我需要在javascript端使用data时 ，我使用JSON
• When what I need on the javascript side is presentation on which I will not do any calculation, I generally use HTML 当我需要在javascript端进行演示而不进行任何计算时，通常会使用HTML

The main advantage of using HTML is when you want to replace a full portion of your page with what comes back from the Ajax request : 使用HTML的主要优点是，当您要用Ajax请求返回的内容替换页面的整个部分时：

• Re-building a portion of page in JS is (quite) hard 在JS中重新构建页面的一部分非常困难
• You probably already have some templating engine on the server side, that was used to generate the page in the first place... Why not reuse it ? 您可能已经在服务器端有了一些模板引擎，这些引擎最初是用来生成页面的。为什么不重用它呢？

I generally don't really take into consideration the "performance" side of things, at least on the server : 通常，至少在服务器上，我通常不会真正考虑“性能”方面：

• On the server, generating a portion of HTML or some JSON won't probably make that much of a difference 在服务器上，生成HTML或某些JSON的部分可能并没有太大的不同
• About the size of the stuff that goes through the network : well, you probably don't use hundreds of KB of data/html... Using gzip on whatever you are transferring is what's going to make the biggest difference (not choosing between HTML and JSON) 关于通过网络的内容的大小：好吧，您可能不会使用数百KB的数据/ html ...在要传输的内容上使用gzip将会带来最大的不同（不要在HTML之间进行选择）和JSON）
• One thing that could be taken into consideration, though, is what resources you'll need on the client to recreate the HTML (or the DOM structure) from the JSON data... compare that to pushing a portion of HTML into the page ;-) 不过，可以考虑的一件事是，您需要在客户端上从JSON数据重新创建HTML （或DOM结构）所需的资源...与将HTML的一部分推入页面相比； -）

Finally, one thing that definitly matters : 最后，绝对重要的一件事：

• How long will it take you to develop a new system that will send data as JSON + code the JS required to inject it as HTML into the page ? 您需要花多长时间开发一个新系统，以JSON +代码的形式发送数据，而JS需要将JS作为HTML注入页面？
• How long will it take to just return HTML ? 仅返回HTML需要多长时间？ And how long if you can re-use some of your already existing server-side code ? 以及如果可以重用一些已经存在的服务器端代码需要多长时间？

And to answer another answer : if you need to update more than one portion of the page, there is still the solution/hack of sending all those parts inside one big string that groups several HTML portions, and extract the relevant parts in JS. 并回答另一个答案：如果您需要更新页面的多个部分，仍然存在将所有这些部分发送到一个大字符串中的解决方案/技巧，该大字符串将几个HTML部分组成一组，然后在JS中提取相关部分。

For instance, you could return some string that looks like this : 例如，您可以返回一些类似于以下内容的字符串：

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

That doesn't look really good, but it's definitly useful (I've used it quite a couple of times, mostly when the HTML data were too big to be encapsulated into JSON) : you are sending HTML for the portions of the page that need presentation, and you are sending JSON for the situation you need data... 看起来并不太好，但是它确实很有用（我已经使用了好几次，主要是在HTML数据太大而无法封装为JSON的情况下） ：您正在为页面的各个部分发送HTML需要演示，并且您正在针对需要数据的情况发送JSON ...

... And to extract those, the JS substring method will do the trick, I suppose ;-) ...并且提取这些，JS substring方法可以解决问题，我想;-)

---

#3楼

If the response needs no further client-side processing, HTML is OK in my opinion. 如果响应不需要进一步的客户端处理，我认为HTML可以。 Sending JSON will only force you to do that client-side processing. 发送JSON仅会强制您执行客户端处理。

On the other hand, I use JSON when I don't want to use all the response data at once. 另一方面，当我不想一次使用所有响应数据时，我使用JSON。 For example, I have a series of three chained selects, where the selected value of one determines which values are going to be used for populating the second, and so on. 例如，我有一系列的三个链式选择，其中一个选择的值确定哪些值将用于填充第二个选择，依此类推。

---

#4楼

Depending on your UI, you may need to update two (or more) different elements in your DOM. 根据您的UI，您可能需要更新DOM中的两个（或更多）不同的元素。 If your response is in HTML, are you going to parse that to figure out what goes where? 如果您的回复是HTML格式的，您是否要解析该内容以找出问题所在？ Or you can just use a JSON hash. 或者，您可以只使用JSON哈希。

You can even combine it, return a JSON w/ html data :) 您甚至可以将其组合，返回带有html数据的JSON :)

{ 'dom_ele_1' : '<p>My HTML part 1</p>', 'dome_ele_2' : '<div>Your payment has been received</div>' }

---

#5楼

IMV, it's all about separating the data from the presentation of the data, but I'm with Pascal, it doesn't necessarily follow that that separation can only be across the client/server boundary. IMV，这完全是将数据与数据表示分离开来，但是我支持Pascal，这并不一定意味着这种分离只能跨越客户端/服务器边界。 If you have that separation already (on the server) and just want to show something to the client, whether you send back JSON and post-process it on the client, or just send back HTML, depends entirely on your needs. 如果已经（在服务器上）具有这种分隔，并且只想向客户端显示某些内容，则是否发送回JSON并在客户端上对其进行后处理，或者只是发送回HTML，完全取决于您的需求。 To say you're "wrong" to send back HTML in the general case is just far too blanket a statement IMV. 在一般情况下，说您“错误”发送回HTML太笼统了IMV声明。

---

#6楼

I mainly agree with the opinions stated here. 我主要同意这里所说的观点。 I just wanted to summarize them as: 我只是想将它们总结为：

• It is bad practice to send HTML if you end up parsing it client-side to do some calculations over it. 如果最终在客户端解析HTML以对其进行一些计算，则发送HTML是一种不好的做法。

• It is bad practice to send JSON if all you'll end up doing is to incorporate it into the page's DOM tree. 如果您最终要做的就是将JSON合并到页面的DOM树中，那么发送JSON是不好的做法。