针对AJAX响应的JSON优于HTML的优势？

Question

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

在谷歌音乐网站点击左侧导航链接时，Google会通过ajax加载正确的歌曲。

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

但是在谷歌音乐中，我看到当我点击导航链接时，Google会获得包含所有标题，专辑的1000首歌曲的JSON数据，然后在飞行中构建html。如果我必须做同样的事情，我会称之为页面获取整页HTML，然后替换正文

所以我想知道使用JSON的优势与谷歌的做法一样

Answer 1

JSON可能是比HTML小得多的数据响应，因此可以更快地下载到客户端。但是，您使用的浏览器将极大地影响HTML在客户端上构建并加载到DOM中的速度（旧版本的IE是最慢的）。有趣的是，对于具有较慢javascript引擎的浏览器，页面的行为是否有所不同。

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

Answer 2

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

<h1>Your Title</h1>

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

另一方面，如果他们一起发送数据和演示文稿，那么他们就必须改进所有内容 - 也许新的外观并没有要求艺术家标题位于h1标签中，但是AJAX调用返回{ {1}}然后他们必须改变数据的存储方式，即Ajax调用返回数据的方式，而不是仅仅用艺术家的名字填充新标签。

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

这就是为什么在数据调用中处理JSON将帮助您以后不会遇到问题，并且您的代码将更简洁，更简单，因为JSON是一种非常简单的数据格式。 （同样@ alex-gitelman已经说过，传输速度更快！）

Answer 3

它将数据的布局和表示推迟到调用Ajax方法的页面。在您的情况下，您在服务器上格式化HTML。

Answer 4

JSON只是表示数据的一种方式，而html表示数据+标记。所以html的大小要大得多，因为它包含更多信息。此外，如果使用html，这意味着服务器实际上对页面进行了所有渲染，但是如果要在不同的帧中填充部分数据呢？

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

Answer 5

主要是简洁;仅发送原始数据而不是HTML应该会导致数据负载显着减少。

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

您可能希望在客户端上执行某些特殊处理，如果您拥有数据，那么您可以拥有更大的灵活性。除非有特殊原因，否则我通常不会使用这种方法......