針對AJAX響應的JSON優於HTML的優勢？

我正在閱讀通過螢火蟲在Google網站中使用的代碼和JS。針對AJAX響應的JSON優於HTML的優勢？

在Google音樂網站上，當我們點擊左側導航鏈接時，Google會通過ajax在右側加載歌曲。

現在，當我想要加載通過Ajax的內容，那麼我就會從GET方法的HTML和更換機身採用新的HTML所收到的HTML

但在谷歌音樂，我看到，當我點擊導航鏈接那麼Google會獲取1000首帶有所有標題，專輯的歌曲的JSON數據，然後立即構建html。如果我不得不做同樣的事情，我會叫的頁面獲取完整的HTML頁面，然後更換閥體

所以我想知道什麼是使用JSON的方式谷歌做到了

2011-07-09 user1

我覺得另一種方式來問這個問題是「什麼是基於相對於返回的JSON數據與JavaScript構建HTML客戶端的優勢將HTML構建在服務器端並通過AJAX發送並直接附加到DOM中。「 - 我個人比前者更喜歡前者。我其實從來沒有做過後者，也沒有真正計劃。 – WhiskeyTangoFoxtrot

JSON可能會比HTML小得多的數據響應，因此會更快地下載到客戶端。但是，您正在使用的瀏覽器將強烈影響HTML在客戶端上構建並加載到DOM中的速度（IE的老版本是最慢的）。如果頁面對於使用較慢JavaScript引擎的瀏覽器表現不同，那將會很有趣。

在我自己的測試中，我已經看到IE 6的瀏覽器比Chrome瀏覽器長60倍，用於從JSON構建一個150行和5列的HTML表格。

來源

2011-07-09 06:14:27 tomfumb

它的優點將數據的佈局和表示推遲到調用Ajax方法的頁面。在你的情況下，你在服務器上格式化HTML。

來源

2011-07-09 06:08:02 Joe

JSON只是表示數據的一種方式，而html表示數據+標記。所以html的尺寸會更大，因爲它包含更多信息。同樣，如果使用html，那意味着服務器實際上會爲頁面進行所有渲染，但如果要在不同幀中填充部分數據呢？

因此，儘管html響應在某些情況下確實有意義，但如果僅傳輸JSON形式的數據，則AJAX效率會更高。

來源

2011-07-09 06:13:30

HTML是一種控制數據外觀的方式。當你寫這樣一個HTML標籤：

<h1>Your Title</h1>

文本「你的標題」是數據。 h1標籤是演示文稿。大多數經驗豐富的開發人員儘可能地分離這兩件事情（數據和表示）。這種分離背後的理念很簡單：如果數據始終只是數據，那麼您可以更輕鬆地改變這些數據的呈現方式。說谷歌希望刷新谷歌音樂的外觀（我希望他們很快就會做），那麼他們不需要觸摸數據模型或任何Ajax調用的方式，數據仍然只是藝術家的名字，跟蹤標題等

另一方面，如果他們一起發送數據和演示文稿，那麼他們將不得不改變一切 - 也許新的外觀和感覺不要求藝術家標題在h1標籤中，但是AJAX調用返回<h1>Artist title</h1>，那麼他們必須改變數據的存儲方式，即Ajax調用返回數據的方式，而不是僅使用藝術家的名字填充新標籤。

這是設計模式的核心基本原則，幾乎所有存在的設計模式都遵循這一原則。如果你曾經聽說過mvc那就是它的意思，你的圖層分離。模型表示數據，視圖表示標記或表示，控制器表示控制這兩者如何相互作用的邏輯。

這就是爲什麼在你的數據呼叫處理JSON將幫助你沒有以後遇到問題，你的代碼將是更清潔和更簡單的JSON是一個非常簡單的數據格式。（也就像@ alex-gitelman已經說過的那樣，傳輸速度更快！）

來源

2011-07-09 06:20:32

我的應用程序是基於MVC的模板放置在不同的地方，所以我可以隨時更改它。但在AJAX調用中，我得到模板加載數據，然後將其插入正文中。所以我的Ajax響應將是HTML + JSON，但與谷歌，只有JSON響應。而不是html – user1

正確，谷歌正是以我描述的原因來做正確的方式。 –

它主要是簡潔;只發送原始數據而不是HTML應該會導致數據有效載荷的顯着減少。

不同的瀏覽器以不同的速度處理JSON，具體取決於它們是否具有內置的JSON解析器。基本上所有的現代瀏覽器有這個 - 一個明顯的例外（如！總是）是IE6的這一個JSON解析器墊片都可以使用（見道格拉斯康樂福json2.js）

它總是可能的，你可能想在執行一些特殊的處理客戶端，如果你有數據，那麼你有更多的權力是靈活的。除非有特殊原因，不是我一般會使用這種方法的...

來源

2011-07-09 07:07:09

針對AJAX響應的JSON優於HTML的優勢？

回答

相關問題