javascript - 用ajax換一個螢幕的資料

為了達到更好的使用者體驗，使用ajax來做資料的切換。假設，一頁顯示100個產品，產品有圖片，有標題以及其他屬性。使用者點擊一些條件，ajax重新載入一頁資料。如何操作dom，讓載入的過程看起來更柔和？這個詞不知道用的對不對，最簡單粗暴的就是，資料dom全清掉，通過ajax擷取的json重新組織dom替換過去。更好的做法是怎樣呢？

這個問題，大家的回答，已經很收益了。我在加大些範圍，如何在使用者體驗與SEO之間平衡呢？我需要搜尋引擎收錄我的資料，但是這種AJAX的方式，搜尋引擎又不認識?

回複內容：

為了達到更好的使用者體驗，使用ajax來做資料的切換。假設，一頁顯示100個產品，產品有圖片，有標題以及其他屬性。使用者點擊一些條件，ajax重新載入一頁資料。如何操作dom，讓載入的過程看起來更柔和？這個詞不知道用的對不對，最簡單粗暴的就是，資料dom全清掉，通過ajax擷取的json重新組織dom替換過去。更好的做法是怎樣呢？

這個問題，大家的回答，已經很收益了。我在加大些範圍，如何在使用者體驗與SEO之間平衡呢？我需要搜尋引擎收錄我的資料，但是這種AJAX的方式，搜尋引擎又不認識?

先說明點，清除dom和頁面載入自然沒有必然聯絡，不能說我操作了dom，我頁面載入就不友好了。頁面的友好性是通過互動實現。當然了，頻繁大量的操作dom會帶來效能問題，會延長頁面的載入時間。

先說明下實現

要是我來做的話，會使用模板引擎如handlebars，拿到資料後渲染成html插入到dom中。如果使用了MVVM架構，只需要改變下model就可以了，但是大部分的架構還是如題主所說的粗暴方式處理的，angularjs除外。所以樓主不要糾結了，就得簡單粗暴的幹，關鍵是怎麼粗暴的幹，讓人感覺不出來。

再說下效果

首先，在不同頁切換時，加個loading的效果。
其次，使用模板引擎管理你的html
如果所有的產品不是一次性展示在頁面上，使用圖片懶載入
請求過的資料要緩衝下來，避免再次請求

SEO

如果要做SEO的話，這種方式是不可行的，因為你的資料都是通過js去渲染的，搜尋引擎爬取你的連結時，頁面內容都是空的，那怎麼收錄你的產品連結？
剛諮詢了我們的SEO工程師，國內搜尋引擎還是以百度為主的，暫時還沒辦法執行js。為了SEO還是採用後端渲染的方式吧。
除非你們產品有這麼吊,那就像它這樣

你提的這個問題是不是想問通過什麼樣的互動才能感覺起來更好？其實這個關鍵靠你自己的想象了
可以這樣，點擊執行ajax的時候，把要替換的dom先用漸隱效果隱藏掉，然後彈出一個loading的提示，成功擷取資料後，替換資料，然後loadding消失，dom顯示
擷取資料有時候會很快，所以，在替換完資料後，延遲一下再進行互動，大約300ms就夠了

"柔和"主要靠的是互動細節，比如載入過程中的視覺反饋（進度條／菊花），載入過程中的互動（正在載入的時候做了其他動作怎麼辦？是mask蒙住，是中止之前的載入，還是操作無效並有視覺反饋“載入中請勿操作”？），以及載入時間過長時的反饋（類似gmail“載入比預期慢，是否切換到普通html版本” “仍在進行/重試”）等等

