我正在通过 firebug 阅读 Google 网站中使用的代码和 JS。
在 Google 音乐网站中，当我们点击左侧导航链接时，Google 会通过 ajax 将歌曲加载到右侧。
现在，当我想通过 Ajax 加载内容时，我通常从 get 方法获取 HTML，并用收到的新 HTML 替换正文的 HTML
但在谷歌音乐中，我看到当我点击导航链接时，谷歌会获取 1000 首歌曲的 JSON 数据，其中包含所有标题、专辑，然后即时构建 html。如果我必须做同样的事情，我会调用页面获取整页 HTML，然后替换正文
所以我想知道像 Google 那样使用 JSON 有什么好处
【问题讨论】：
标签： javascript ajax json
JSON 可能是比 HTML 更小的数据响应，因此会更快地下载到客户端。但是，您使用的浏览器会极大地影响 HTML 在客户端构建和加载到 DOM 的速度（旧版本的 IE 最慢）。看看页面对于 JavaScript 引擎较慢的浏览器的行为是否有所不同会很有趣。
在我自己的测试中，我发现 IE 6 从 JSON 构建具有 150 行和 5 列的 HTML 表所需的时间比 Chrome 长 60 倍。
【讨论】：
HTML 是一种控制数据外观的方式。当您编写这样的 HTML 标记时：
<h1>Your Title</h1>
文本“Your Title”是数据。 h1 标签是演示文稿。大多数经验丰富的开发人员都试图尽可能地将这两件事（数据和表示）分开。这种分离背后的理念很简单：如果数据始终只是数据，那么您可以更轻松地更改这些数据的呈现方式。假设谷歌想要刷新谷歌音乐的外观（我希望他们很快就会这样做）那么他们就不必触及数据模型或他们的任何 ajax 调用的工作方式，数据仍然只是艺术家姓名、曲目标题等。
另一方面，如果他们同时发送数据和演示文稿，那么他们将不得不对所有内容进行改造——也许新的外观和感觉不需要将艺术家标题放在 h1 标签中，但 AJAX 调用会返回 @ 987654322@ 然后他们必须改变数据的存储方式，Ajax 调用返回数据的方式，而不是仅仅用艺术家的名字填充一个新标签。
这是设计模式的核心基本原则，几乎所有存在的设计模式都遵循这一原则。如果您听说过 mvc，那就是它的含义，即分层。模型代表数据，视图代表标记或表示，控制器代表控制这两者如何交互的逻辑。
这就是为什么在您的数据调用中处理 JSON 将帮助您以后不会遇到问题，并且您的代码会更简洁，因为 JSON 是一种非常简单的数据格式。 （也正如@alex-gitelman 已经说过的，转移速度更快！）
【讨论】：
它将数据的布局和呈现推迟到调用 Ajax 方法的页面。在您的情况下，您在服务器上格式化 HTML。
【讨论】：
JSON 只是一种表示数据的方式，而 html 表示数据+标记。因此 html 的大小会更大，因为它包含更多信息。此外，如果使用 html，这意味着服务器实际上会为页面进行所有渲染，但如果您想在不同的帧中填充部分数据怎么办？
因此，虽然 html 响应在某些情况下确实有意义，但如果只传输 JSON 形式的数据，AJAX 的效率会高得多。
【讨论】：
主要是简洁；只发送原始数据而不是 HTML 应该会显着减少数据负载。
不同的浏览器以不同的速度处理 JSON，具体取决于它们是否具有内置的 JSON 解析器。基本上所有现代浏览器都有这个 - 值得注意的例外（一如既往！）是可以使用 JSON 解析器填充程序的 IE6（参见 Douglas Crockfords json2.js）
您总是可能希望在客户端上执行一些特殊处理，如果您有数据，那么您就有更多的能力来灵活处理。除非有特殊原因，否则我通常会使用这种方法...
【讨论】：