pjax將H5的pushState()接口和Ajax技術封裝在一起,做到了在實現頁面局部刷新的同時改變了地址欄內容。
簡單來說,pjax的實現過程如下:綁定pjax事件的元素(一般為a元素)被點擊或執行其他操作而觸發向服務器發起數據請求時,pjax機制會首先攔截住該請求,即不讓瀏覽器跳轉到a鏈接的指向上去;然后將該請求封裝成ajax請求,將服務器返回的HTML代碼片顯示在指定的容器內,同時調用pushState()接口改變瀏覽器的地址欄。
我們都知道,pjax請求到的不是json數據,也不是完整的HTML頁面,而是需要顯示在局部的HTML碎片,那么我們作為開發者需要做哪些工作?最開始學習pjax的時候總是以為這部分HTML碎片是由pjax內部機制自動處理的,其實不然。
以welefen的開源pjax版本為例,首先根據源文檔說明,引入js文件,賦予$.pjax(options)的各項參數值,具體參數解釋這里不再贅述,網上解釋資料很多(參考解釋:可以看這里,這篇文章就是原作者welefen的說明)。其中的container參數就是要實現局部刷新的容器,也就是這個容器的內容會在地址欄變化的同時發生內容的更新,其它元素均不會重新加載。那么關鍵問題來了,pjax請求到的數據從哪里來?其實,粗略理解的話,pjax請求的也是一個頁面,譬如,我點了一個綁定了pjax事件的a鏈接,其實就是向服務器要了一個頁面(就是a鏈接的href)。但是這個頁面的哪些部分需要重新請求、哪些部分不需要重新請求,這部分的工作還是需要我們自己來處理的;pjax提供了一個機制:自動將你處理好的需要重新請求的HTML片段填充到container中。說白了就是在這個a鏈接指向的頁面中做一些處理:哪些HTML元素是需要局部加載的就只顯示哪些HTML元素。當然這是在該請求是pjax請求的前提下,非pjax請求自然就要返回完整頁面:通過判斷該請求是否有名稱為X-PJAX的請求頭來判斷是否是pjax請求,asp.net中的處理示例:Request.Headers["X-PJAX"]==null?false:true。這部分的工作處理好了,當我們點擊a鏈接的時候服務器就會把我們想要的HTML片返回到瀏覽器,pjax會自動將該部分HTML碎片填充到container中顯示處理,同時調用pushState()接口完成這個過程。對于這部分的解釋網上的大部分文章都沒有說的很清楚,資料又是東拼西湊的不系統,結果讓像我這樣的菜鳥在看的時候一頭霧水,直到自己實現出來才算徹底明白其中的機理。
如果看到這里你還不是很清楚,不妨參看一下這里的例子(打開sln文件后瀏覽pjax下的aaaa.aspx、bbbb.aspx等等即可),結合我的說明相信很快能理解并會用pjax啦。
寫這篇文章主要是為了加深自己的印象,建議大家也可以在自己掌握一項新技能的時候通過寫心得寫體會的方式強化一下。
新聞熱點
疑難解答