javascript - 为什么返回生成的HTML而不是JSON是一种不好的做法？ 还是？(Why is it a bad practice to return generated HTML instead of JSON? Or is it?)

Question

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?(您站在哪一边？为什么？)

  ask by Cyril Gupta translate from so

Answer 1

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方法可以解决问题，我想;-))