pjax將H5的pushState()接口和Ajax技術(shù)封裝在一起，做到了在實(shí)現(xiàn)頁面局部刷新的同時(shí)改變了地址欄內(nèi)容。

綁定pjax事件的元素（一般為a元素）被點(diǎn)擊或執(zhí)行其他操作而觸發(fā)向服務(wù)器發(fā)起數(shù)據(jù)請求時(shí)，pjax機(jī)制會首先攔截住該請求，即不讓瀏覽器跳轉(zhuǎn)到a鏈接的指向上去；然后將該請求封裝成ajax請求，將服務(wù)器返回的HTML代碼片顯示在指定的容器內(nèi)，同時(shí)調(diào)用pushState()接口改變?yōu)g覽器的地址欄。

我們都知道，pjax請求到的不是json數(shù)據(jù)，也不是完整的HTML頁面，而是需要顯示在局部的HTML碎片，那么我們作為開發(fā)者需要做哪些工作？最開始學(xué)習(xí)pjax的時(shí)候總是以為這部分HTML碎片是由pjax內(nèi)部機(jī)制自動處理的，其實(shí)不然。

以welefen的開源pjax版本為例，首先根據(jù)源文檔說明，引入js文件，賦予$.pjax(options)的各項(xiàng)參數(shù)值，具體參數(shù)解釋這里不再贅述，網(wǎng)上解釋資料很多（參考解釋：可以看這里，這篇文章就是原作者welefen的說明）。其中的container參數(shù)就是要實(shí)現(xiàn)局部刷新的容器，也就是這個(gè)容器的內(nèi)容會在地址欄變化的同時(shí)發(fā)生內(nèi)容的更新，其它元素均不會重新加載。那么關(guān)鍵問題來了，pjax請求到的數(shù)據(jù)從哪里來？其實(shí)，粗略理解的話，pjax請求的也是一個(gè)頁面，譬如，我點(diǎn)了一個(gè)綁定了pjax事件的a鏈接，其實(shí)就是向服務(wù)器要了一個(gè)頁面（就是a鏈接的href）。但是這個(gè)頁面的哪些部分需要重新請求、哪些部分不需要重新請求，這部分的工作還是需要我們自己來處理的；pjax提供了一個(gè)機(jī)制：自動將你處理好的需要重新請求的HTML片段填充到container中。說白了就是在這個(gè)a鏈接指向的頁面中做一些處理：哪些HTML元素是需要局部加載的就只顯示哪些HTML元素。當(dāng)然這是在該請求是pjax請求的前提下，非pjax請求自然就要返回完整頁面：通過判斷該請求是否有名稱為X-PJAX的請求頭來判斷是否是pjax請求，asp.net中的處理示例：Request.Headers["X-PJAX"]==null?false:true。這部分的工作處理好了，當(dāng)我們點(diǎn)擊a鏈接的時(shí)候服務(wù)器就會把我們想要的HTML片返回到瀏覽器，pjax會自動將該部分HTML碎片填充到container中顯示處理，同時(shí)調(diào)用pushState()接口完成這個(gè)過程。對于這部分的解釋網(wǎng)上的大部分文章都沒有說的很清楚，資料又是東拼西湊的不系統(tǒng)，結(jié)果讓像我這樣的菜鳥在看的時(shí)候一頭霧水，直到自己實(shí)現(xiàn)出來才算徹底明白其中的機(jī)理。

如果看到這里你還不是很清楚，不妨參看一下這里的例子（打開sln文件后瀏覽pjax下的aaaa.aspx、bbbb.aspx等等即可），結(jié)合我的說明相信很快能理解并會用pjax啦。

寫這篇文章主要是為了加深自己的印象，建議大家也可以在自己掌握一項(xiàng)新技能的時(shí)候通過寫心得寫體會的方式強(qiáng)化一下。