以前我們點擊a鏈接的時候總是會刷新整個頁面並跳轉到新頁面，中間可以很明顯的看到短暫的白屏。pjax就很好的解決了這問題。

pjax的原理很簡單，就是發送一個ajax請求，獲取html代碼，再把相關代碼應用到指定容器中，就完成了pjax。pjax除了解決跳轉白屏以外，還能替代iframe，讓前端不得不使用iframe的場景大大減少。

一個最簡單的pjax例子，只需要jQuery，不使用任何插件：

html:

<a class="leftPaneItem"  onclick="writeMail()">寫郵件</a>

<div id="control"></
 
div>

js:

function sentMail() {
    $.ajax({
        url:"./writeMail.html",       
        success:function (data) {
            $("#control").html(data)
        }
    })
}

這裏對writeMail.html有些特殊要求，需要在普通html頁面的基礎上去掉html、meta、body、title等標簽，僅保留body內的部分。
如果有引用樣式或者腳本可以照常引用，只是路徑是相對於發送請求的頁面，而不是被請求的頁面。

有封裝好的插件嗎？答案是有的。
插件地址：https://github.com/defunkt/jquery-pjax

使用pjax插件的話，上面的js就可以改成：

function sentMail() {
　　     $.pjax({
        　　url:"./writeMail/writeMail.html",   //請求的頁面地址
        　　container:"#control",　　　　　　　　　　//使用什麽容器裝載html
　　　　　　　push:false,   　　　　　　　　　　　　　　//是否模擬a鏈接跳轉造成的url改變

    　　 })
}

如果想快速將頁面內所有a標簽替換成pjax的跳轉方式可以寫成這樣：

$(document).pjax(‘a‘, ‘#container‘)

其中a是觸發元素，#container是裝載pjax返回內容的容器。

如果被請求的頁面已經包含html、body之類的標簽，請求來之後又不想要這些標簽，可以這樣寫：

function sentMail() {
　　     $.pjax({
        　　url:"./writeMail/writeMail.html",   //請求的頁面地址
        　　container:"#control",　　　　　　　　　　//使用什麽容器裝載html
　　　　　　　push:false,   　　　　　　　　　　　　　　//是否模擬a鏈接跳轉造成的url改變
　　　　　　  fragment:"body"　　　　　　　　　　　　//css選擇器，被選中dom的內容會被抽取出來
    　　 })
}

有一點需要註意：如果使用pjax插件並且在配置裏不設置push選項為false，則要求項目內所有經過pjax處理的鏈接必須采用絕對路徑，否則跳轉後再次跳轉到相對路徑則會導致404。

jquery pjax 用法總結