Javascript JSON在AJAX响应方面优于HTML？

我正在通过firebug阅读谷歌网站上使用的代码和JS

在谷歌音乐网站中，当我们点击左导航链接时，谷歌会通过ajax将歌曲加载到右半身

现在，当我想通过Ajax加载内容时，我通常从get方法获取HTML，并用接收到的新HTML替换body的HTML

但在谷歌音乐中，我看到当我点击导航链接时，谷歌会获得1000首歌曲的JSON数据，包括所有标题、专辑，然后动态构建html。如果我必须做同样的事情，我会调用页面，获取完整的HTML页面，然后替换主体

---

所以我想知道，像Google那样使用JSON有什么好处，它将数据的布局和表示推迟到调用Ajax方法的页面上。在您的例子中，您可以在服务器上格式化HTML。

JSON只是表示数据的一种方式，而HTML表示数据+标记。因此，html的大小将更大，因为它包含更多的信息。另外，如果使用html，这意味着服务器实际上会执行页面的所有呈现，但如果要在不同的帧中填充部分数据，该怎么办

---

因此，虽然html响应在某些情况下是有意义的，但如果只传输JSON形式的数据，AJAX的效率会更高。

JSON可能比html的数据响应小得多，因此下载到客户端的速度会更快。但是，您使用的浏览器将强烈影响在客户端上构建HTML并加载到DOM中的速度（旧版本的IE最慢）。如果页面在javascript引擎较慢的浏览器中表现出不同的行为，这将是一件有趣的事情

---

在我自己的测试中，我看到IE 6比Chrome花了60倍的时间从JSON构建一个包含150行和5列的HTML表。

HTML是一种控制数据外观的方法。当您编写如下HTML标记时：

<h1>Your Title</h1>

你的头衔

文本“您的标题”就是数据。h1标签就是演示文稿。大多数经验丰富的开发人员尽可能地将这两件事（数据和表示）分开。这种分离背后的原理很简单：如果数据始终只是数据，那么您可以更轻松地更改数据的显示方式。如果谷歌想刷新谷歌音乐的外观（我希望他们很快就会这样做），那么他们就不必去碰数据模型或任何ajax调用的工作方式，数据仍然只是艺术家姓名、曲目标题等

另一方面，如果他们同时发送数据和演示文稿，那么他们将不得不修改所有内容--可能新的外观和感觉不要求艺术家标题位于h1标记中，但是AJAX调用返回

艺术家标题

，然后他们必须更改数据存储的方式，AJAX调用返回数据的方式，而不仅仅是用艺术家的名字填充一个新标签

这是设计模式中的核心基本原则，几乎所有存在的设计模式都遵循这一原则。如果你听说过mvc，那就是分层。模型表示数据，视图表示标记或表示，控制器表示控制这两者如何交互的逻辑

---

这就是为什么在数据调用中处理JSON将有助于您以后不会遇到问题，并且您的代码将更干净、更简单，因为JSON是一种非常简单的数据格式。（正如@alex gitelman已经说过的，转移速度更快！）

主要是简洁；只发送原始数据而不是HTML应该会大大减少数据负载

不同的浏览器处理JSON的速度不同，这取决于它们是否有内置的JSON解析器。基本上所有现代浏览器都有这一点——值得注意的例外（一如既往！）是IE6，它可以使用JSON解析器垫片（参见Douglas Crockfords）

---

您可能总是希望在客户机上执行一些特殊处理，如果您有数据，那么您就有更大的灵活性。除非有特殊原因，否则我通常会使用这种方法…

我的应用程序是基于MVC的，模板的位置不同，所以我可以随时更改它。但在AJAX调用中，我得到一个加载了数据的模板，然后将其插入到主体中。所以我的ajax响应将是html+JSON，但对于google，只有JSON响应。不是htmlCorrect，因为我所描述的原因，Google正在以正确的方式进行。我想问这个问题的另一种方式是“基于返回的JSON数据使用javascript构建HTML客户端与在服务器端构建HTML并通过AJAX发送并直接附加到DOM中相比有什么优势。”就我个人而言，我更喜欢前者而不是后者。事实上，我从来没有做过后者，也不打算做。