通過AJAX動畫無限滾動：返回JSON或HTML？

Question

我想創建一個無限滾動頁面 - 有點類似於tumblr檔案頁面，如this。我理解我必須用服務器調用加載內容的概念，但我不知道如何在Tumblr中實現這種「動畫加載」設計。

我不想知道確切的代碼，只有解決方案的整體概念。那麼做這樣的事情最好的做法是什麼？

我應該從服務器獲得什麼：一堆JSON數據或完整的HTML頁面的？

我試着解碼上面的Tumblr頁面，我在網絡流量頁面看到，在每個滾動事件中都有一個POST請求，它返回一個完整的 HTML頁面，它具有自己的JavaScript和CSS內容！

我猜動畫邏輯是在這個JavaScript內容裏面的。

，但我對這個方法2個問題：

• 當我從服務器（包含新的一頁，也），得到完整的HTML網頁我怎麼能扔當前顯示的HTML文檔路程，我設定了新的？
• 從性能的角度來看，每次返回完整的HTML文檔都不算太糟糕嗎？因爲完整的文檔也會包含檔案的前面「頁面」的結果。或者我認爲錯了？

從服務器返回一個JSON結果不是更好嗎？ （它必須在客戶端解析，但它會更多的網絡流量友好，我猜）

如果最好是返回一個JSON，爲什麼Tumblr的工作方式是相反的？

Answer 1

確實有利於不發送大量不會被使用的數據。 但是，如果您的服務器擁有大量資源，則可以在服務器上而不是客戶端上執行一些預處理。這意味着，您可以發送一個HTML片段，而不是JSON，該片段將被添加。而且，如果你的HTML結構非常複雜，你不想實現它兩次;一次使用HTML，一次使用Javascript。

Tumblr的工作方式可能是因爲他們不想在服務器代碼庫中添加更多內容，而是將工作卸載到客戶端。 由於每次只發送一個頁面，因此開銷爲常量 w.r.t.頁數。客戶端可以採取完整的HTML，使用DOM操作找到相應的元素並將其放置在某處。

事實上，這正是自動翻頁插件的作用：它學會從用戶的「下一個」鏈接，頁面正文，然後從不知情的服務器獲取額外全頁面並插入其內容到頁面（和讀下一頁網址）。

簡而言之：

• JSON的益處是低帶寬的使用。
• HTML代碼片段的好處是對客戶端處理能力的要求很低，並且很少或沒有代碼重複。
• 完整的HTML的好處是服務器不需要關心它是否服務於第一頁或任何其他頁面。