1. 程式人生 > >AJAX之再升級版PJAX

AJAX之再升級版PJAX

很好 升級 博客 當前頁 後端 閃爍 缺點 nbsp 內容

   前幾天在一個大神群裏提到ajax優化選項卡功能的方法上,有位低調的大神默默得打出:了解一下pjax,好奇心的驅使下,我具體查了一下pjax,不一般啊,ax結合pushState和ajax技術, 不需要重新加載整個頁面就能從服務器加載Html到你當前頁面,這個ajax請求會有永久鏈接、title並支持瀏覽器的回退/前進按鈕

ax結合pushState和ajax技術, 不需要重新加載整個頁面就能從服務器加載Html到你當前頁面,這個ajax請求會有永久鏈接、title並支持瀏覽器的回退/前進按鈕

優點:
  • 減輕服務端壓力
按需請求,每次只需加載頁面的部分內容,而不用重復加載一些公共的資源文件和不變的頁面結構,大大減小了數據請求量,以減輕對服務器的帶寬和性能壓力,還大大提升了頁面的加載速度。
  • 優化頁面跳轉體驗
常規頁面跳轉需要重新加載畫面上的內容,會有明顯的閃爍,而且往往和跳轉前的頁面沒有連貫性,用戶體驗不是很好。如果再遇上頁面比較龐大、網速又不是很好的情況,用戶體驗就更加雪上加霜了。使用pjax後,由於只刷新部分頁面,切換效果更加流暢,而且可以定制過度動畫,在等待頁面加載的時候體驗就比較舒服了。
缺點:
  • 不支持一些低版本的瀏覽器(如IE系列)
pjax使用了pushState來改變地址欄的url,這是html5中history的新特性,在某些舊版瀏覽器中可能不支持。不過pjax會進行判斷,功能不適用的時候會執行默認的頁面跳轉操作。
  • 使服務端處理變得復雜
要做到普通請求返回完整頁面,而pjax請求只返回部分頁面,服務端就需要做一些特殊處理,當然這對於設計良好的後端框架來說,添加一些統一處理還是比較容易的,自然也沒太大問題。另外,即使後臺不做處理,設置pjax的fragment參數來達到同樣的效果。
綜合來看,pajx的優點很強勢,缺點也幾乎可以忽略,還是非常值得推薦的,尤其是類似博客這種大部分情況下只有主體內容變化的網站。關鍵它使用簡單、學習成本小,即時全站只有極個別頁面能用得到,嘗試下沒什麽損失。pjax的github主頁介紹的已經很詳細了,想了解更多可以看下源碼。

AJAX之再升級版PJAX